@import "../canvas-nodes/bernini-bridge/styles.css?v=20260729-01";
@import "../canvas-nodes/ty360-panorama/styles.css?v=20260813-01";
@import "../canvas-nodes/sphere-light-render/styles.css?v=20260729-01";
@import "../canvas-nodes/ideogram/styles.css?v=20260729-01";
@import "../canvas-nodes/qwen-multiangle/styles.css?v=20260828-04";
@import "../modules/gaussian-viewer/styles.css?v=20260813-01";

:root {
  --ink: #182127;
  --muted: #738089;
  --faint: #aab5ba;
  --line: #dbe4e5;
  --soft-line: #e9eff0;
  --paper: #ffffff;
  --canvas: #f5f8f8;
  --rail: #1b252a;
  --rail-2: #243136;
  --rail-text: #d9e2e3;
  --rail-muted: #91a1a5;
  --cyan: #1e9eaa;
  --cyan-soft: #dff4f4;
  --amber: #c98d2d;
  --amber-soft: #fff1d7;
  --comfy-muted-font-size: 11px;
  --comfy-muted-font-weight: 400;
  --shadow: 0 18px 50px rgba(31, 52, 59, .12);
  --radius: 10px;
  --ease: cubic-bezier(.22,.8,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: "Inter", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--canvas); }
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.app-shell { display: flex; width: 100%; height: 100vh; }

/* 卡片继续垂直居中，但高度恒定：登录 / 注册的字段槽位等高（.auth-slot），提示说明又占着
   固定的预留位（.auth-message），所以切换模式、或「注册已提交」多出一行说明时，卡片高度都不变
   —— 居中的位置自然也不动。safe center：内容比视口高时退回顶部，避免上方被裁掉。 */
.auth-gate { width: 100%; min-height: 100vh; display: grid; justify-items: center; align-content: safe center; padding: 24px; background: #eef4f4; overflow-y: auto; }
.auth-panel { width: min(420px, 100%); padding: 34px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.auth-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #ffffff; background: var(--rail); border-radius: 9px; font-size: 19px; font-weight: 800; }
/* 与侧边栏 .brand-mark svg 同一做法：让图形撑满底板。
   注意那两个矩形在 viewBox(32×32) 里只占 20.9×12.4，所以元素尺寸必须够大，
   写死成 24px 会让实际图形缩到 15.7px 宽，看起来就是「符号偏小」。 */
.auth-mark svg { width: 100%; height: 100%; display: block; }
/* 品牌锁定：图标在左、文字在右 —— 与侧边栏 .brand-lockup 同一形态。
   侧边栏那套是深底白字，这里是白卡片，所以文字改用深色。 */
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-brand-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-brand-copy strong { color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.auth-brand-copy span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.auth-panel .eyebrow { color: var(--cyan); }
/* 标题与副标题只占固定的一行高度：两种模式的文案不同（进入创作中心 / 创建新账号），
   但高度必须一致，否则下方的页签和输入框会被推着走。 */
.auth-panel h1 { margin: 10px 0 0; font-size: 22px; line-height: 27px; min-height: 27px; letter-spacing: 0; }
.auth-panel p { margin: 10px 0 24px; color: var(--muted); font-size: 11px; line-height: 1.7; min-height: 19px; }
.auth-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 36px; margin: 0 0 18px; padding: 3px; background: #edf2f2; border: 1px solid var(--line); border-radius: 7px; }
.auth-mode-button { min-width: 0; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: 10px; font-weight: 800; }
.auth-mode-button.active { color: var(--ink); background: var(--paper); box-shadow: 0 1px 4px rgba(27, 42, 47, .12); }
.auth-form { display: flex; flex-direction: column; gap: 13px; }
.auth-form label:not(.auth-check) { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
/* 第三行槽位：登录放「保持登录」，注册放「确认密码」。高度在这里钉死
   （= 标签一行 14px + 间距 6px + 输入框 38px = 58px），两个模式下槽位等高，
   所以下方的提交按钮位置完全一致 —— 切换时只有槽位里的内容在换。 */
.auth-slot { display: flex; flex-direction: column; gap: 6px; min-height: 58px; line-height: 14px; }
.auth-form input[type="text"], .auth-form input[type="password"] { width: 100%; height: 38px; padding: 0 11px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; }
.auth-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.12); }
.auth-check { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.auth-check input { accent-color: var(--cyan); }
.auth-submit { width: 100%; justify-content: center; margin-top: 6px; }
.auth-error { margin-top: 14px; padding: 9px 10px; color: #9a3e3e; background: #fff0ef; border: 1px solid #f0c7c3; border-radius: 6px; font-size: 10px; line-height: 1.5; }
.auth-notice { margin-top: 14px; padding: 9px 10px; color: #2f6b5f; background: #eef8f5; border: 1px solid #bfe2d8; border-radius: 6px; font-size: 10px; line-height: 1.5; }
/* 提示说明的固定预留位：47px = 单行提示的高度（外边距 14 + 内边距 9×2 + 行高 15）。
   这块位置无论有没有提示都占着，卡片高度因此与状态无关 —— 垂直居中的卡片位置永远不变，
   「注册已提交」出现时只是填进这块预留空间，不推挤上方的 logo、标题、页签与输入框。
   flow-root 建 BFC：否则子提示的 margin-top 会折叠到容器外，有提示时反而高出一截。 */
.auth-message { display: flow-root; min-height: 47px; }
/* 注册防刷的蜜罐字段：正常用户看不见、也不会填，因此不占位、不进 Tab 序
   （配合 aria-hidden 与 tabindex=-1）。刻意不用 display:none —— 一部分脚本会
   主动跳过 display:none 的字段。 */
.auth-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.auth-endpoint { display: block; margin-top: 18px; overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.sidebar { position: relative; z-index: 10; flex: 0 0 var(--sidebar-width, 234px); width: var(--sidebar-width, 234px); min-width: var(--sidebar-width, 234px); max-width: 468px; height: 100%; display: flex; flex-direction: column; padding: 16px 12px 12px; color: var(--rail-text); background: var(--rail); border-right: 1px solid #334147; transition: margin-left .24s var(--ease); }
.sidebar-is-collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-width, 234px) + 8px); }
.sidebar-is-collapsed .sidebar:hover { margin-left: 0; }
.sidebar-is-collapsed.sidebar-is-revealed .sidebar { margin-left: 0; }
.sidebar-edge-reveal { display: none; }
.sidebar-is-collapsed .sidebar-edge-reveal { position: fixed; inset: 0 auto 0 0; z-index: 11; display: block; width: 8px; background: var(--rail); border-right: 1px solid #52646a; cursor: e-resize; }
.sidebar-is-collapsed.sidebar-is-revealed .sidebar-edge-reveal { display: none; }
.sidebar * { scrollbar-width: thin; scrollbar-color: rgba(201, 214, 216, .42) transparent; }
.sidebar *::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar *::-webkit-scrollbar-track { background: transparent; }
.sidebar *::-webkit-scrollbar-thumb { background: rgba(201, 214, 216, .34); border-radius: 999px; }
.sidebar *::-webkit-scrollbar-thumb:hover { background: rgba(201, 214, 216, .52); }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 8px 10px; border-bottom: 1px solid rgba(218, 231, 231, .12); }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; background: #ffffff; border: 0; border-radius: 9px; cursor: pointer; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark:hover { background: #e9f1f1; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { font-size: 14px; letter-spacing: .12em; }
.brand-copy span, .workspace-label, .eyebrow { color: var(--rail-muted); font-size: 9px; letter-spacing: .14em; font-weight: 700; }
.brand-company { margin: 0; padding: 2px 10px 0; color: var(--rail-muted); font-size: 11px; font-weight: 300; letter-spacing: .11em; white-space: nowrap; }
.workspace-label { padding: 16px 10px 6px; }
.project-entry { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 10px; }
.project-entry-label { display: flex; align-items: center; gap: 7px; padding: 0 9px; color: #91a1a5; font-size: 10px; font-weight: 800; }
.project-entry-label svg { width: 13px; height: 13px; color: #79c9ca; }
.project-entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.project-action { height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #c9d6d8; background: rgba(255,255,255,.05); border: 1px solid rgba(218,231,231,.12); border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 700; }
.project-action:hover { color: #ffffff; background: rgba(113,211,210,.12); border-color: rgba(113,211,210,.3); }
.project-action svg { width: 14px; height: 14px; }
.canvas-context-card { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px; color: #ffffff; background: #2b3a3f; border: 1px solid rgba(113,211,210,.28); border-radius: 8px; cursor: pointer; text-align: left; }
.canvas-context-card:hover { background: #314248; border-color: rgba(113,211,210,.42); }
.context-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: #8ee8e4; background: rgba(113,211,210,.1); border-radius: 7px; }
.context-icon svg { width: 17px; height: 17px; }
.context-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.context-copy strong, .context-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-copy strong { font-size: 12px; }
.context-copy small { color: var(--rail-muted); font-size: 10px; }
.context-chevron { width: 14px; height: 14px; color: var(--rail-muted); flex: 0 0 auto; }
.project-navigator { max-height: 132px; overflow: auto; padding-right: 2px; }
.project-tree { margin-bottom: 5px; }
.project-tree-head { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 6px 8px; color: var(--rail-muted); background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; text-align: left; }
.project-tree-head:hover, .project-tree.active > .project-tree-head { color: #ffffff; background: #2b3a3f; border-color: rgba(113,211,210,.18); }
.tree-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; color: #83d8d8; background: rgba(113,211,210,.1); border-radius: 6px; }
.tree-icon svg, .tree-chevron { width: 14px; height: 14px; }
.tree-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tree-copy strong, .tree-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-copy strong { font-size: 11px; }
.tree-copy small { color: var(--rail-muted); font-size: 9px; }
.project-canvas-tree { padding: 0 0 4px 32px; }
.project-canvas-tree.compact { padding-top: 2px; }
.tree-section-label { padding: 4px 7px 2px; color: #718188; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.canvas-tree-row, .canvas-create-row { width: 100%; min-height: 23px; display: flex; align-items: center; gap: 7px; padding: 0 7px; color: #aebdc0; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
.canvas-tree-row:hover, .canvas-tree-row.active, .canvas-create-row:hover { color: #ffffff; background: rgba(255,255,255,.06); }
.canvas-tree-row svg, .canvas-create-row svg { width: 13px; height: 13px; color: #79c9ca; flex: 0 0 auto; }
.canvas-tree-row span, .canvas-create-row span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }
.canvas-tree-row small { margin-left: auto; color: #6f7f83; font-size: 9px; }
.canvas-create-row { color: #82cdd0; }
.canvas-switcher { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 9px 10px; color: #ffffff; background: #2b3a3f; border: 1px solid rgba(113,211,210,.28); border-radius: 8px; cursor: pointer; text-align: left; }
.canvas-switcher:hover { background: #314248; }
.switcher-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: #8ee8e4; background: rgba(113,211,210,.1); border-radius: 7px; }
.switcher-icon svg { width: 17px; height: 17px; }
.switcher-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.switcher-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.switcher-copy small { overflow: hidden; color: var(--rail-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.switcher-chevron { width: 14px; height: 14px; color: var(--rail-muted); flex: 0 0 auto; }
.side-nav { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.canvas-service-nav { min-height: 0; overflow: auto; padding-right: 2px; }
.no-active-canvas .canvas-service-nav { opacity: .42; pointer-events: none; }
.page-service-nav { flex: 0 0 auto; padding-top: 4px; }
.nav-item, .sub-item, .workflow-item, .profile-button { width: 100%; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.nav-item { min-height: 36px; display: flex; align-items: center; gap: 11px; padding: 0 10px; border-left: 2px solid transparent; color: var(--rail-muted); border-radius: 6px; transition: background .16s, color .16s, border-color .16s; }
.nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 1.8; }
.nav-item span { flex: 1; font-size: 12px; font-weight: 600; }
.nav-item:hover { color: var(--rail-text); background: rgba(255,255,255,.06); }
.nav-item.active { color: #ffffff; background: #2b3a3f; border-left-color: #71d3d2; }
.nav-item .chevron, .external-mark { width: 14px; height: 14px; flex: 0 0 auto; }
.nav-state { color: #78d5d4; font-size: 9px; font-style: normal; font-weight: 600; }
.soon-badge { flex: 0 0 auto !important; color: #c7a96c; font-size: 9px !important; font-weight: 500 !important; }
.nav-group.expanded .nav-group-trigger .chevron { transform: rotate(0); }
.nav-group:not(.expanded) .nav-group-trigger .chevron { transform: rotate(-90deg); }
.sub-nav { display: none; padding: 4px 0 8px 37px; }
.nav-group.expanded .sub-nav { display: block; }
.nav-group.expanded .model-sub-nav { display: flex; }
.page-nav-group:not(.expanded) .page-sub-nav { display: none; }
.page-nav-group.expanded .page-sub-nav { display: block; padding: 4px 0 8px 22px; }
.page-nav-group-trigger .page-nav-chevron { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .16s var(--ease); }
.page-nav-group:not(.expanded) .page-nav-group-trigger .page-nav-chevron { transform: rotate(0deg); }
.page-nav-group.expanded .page-nav-group-trigger .page-nav-chevron { transform: rotate(90deg); }
.page-nav-child { min-height: 30px; gap: 7px; padding-left: 7px; font-size: 11px; }
.page-nav-child .sub-dot { flex: 0 0 5px; }
.page-nav-child > svg:not(.sub-dot) { width: 14px; height: 14px; color: #79c9ca; flex: 0 0 auto; }
.page-nav-child span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comfy-sub-nav { padding-left: 21px; }
.canvas-tools-sub-nav { padding-left: 21px; }
.comfy-category-list { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.model-sub-nav { flex-direction: column; gap: 3px; padding-top: 3px; }
.workflow-category { border-radius: 6px; }
.workflow-category.active { background: rgba(113,211,210,.07); }
.workflow-category-trigger { width: 100%; min-height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 7px; color: var(--rail-muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left; }
.workflow-category-trigger:hover, .workflow-category.active .workflow-category-trigger { color: #ffffff; }
.workflow-category-trigger span { min-width: 0; flex: 1; display: inline-flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; }
.workflow-category-trigger svg { width: 13px; height: 13px; color: #79c9ca; }
.workflow-category-trigger small { color: #6f7f83; font-size: 9px; }
.category-workflows { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 5px 13px; }
.sub-item { min-height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--rail-muted); border-radius: 5px; font-size: 11px; }
.sub-item:hover, .sub-item.active { color: #dff4f4; background: rgba(113, 211, 210, .1); }
.sub-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sub-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 7px 4px; color: #718188; font-size: 9px; letter-spacing: .08em; }
.workflow-item { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 7px; color: #b8c5c7; border-radius: 5px; }
.workflow-item:hover { color: #ffffff; background: rgba(255,255,255,.06); }
.workflow-item:disabled { cursor: not-allowed; opacity: .42; }
.workflow-item:disabled:hover { color: #b8c5c7; background: transparent; }
.workflow-item svg { width: 13px; height: 13px; color: #79c9ca; }
.workflow-item span { flex: 0 0 142px; width: 142px; max-width: 142px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.workflow-item small { margin-left: auto; color: #6f7f83; font-size: 9px; }
.canvas-tool-nav-list { padding-left: 13px; }
.canvas-tool-nav-item span { flex: 1 1 auto; width: auto; max-width: none; }
.canvas-tool-badge { flex: 0 0 auto; padding: 0 5px; color: #d4a73f !important; background: rgba(212,167,63,.1); border: 1px solid rgba(212,167,63,.26); border-radius: 999px; font-size: 8px !important; font-weight: 800; line-height: 16px; }
.workflow-list { max-height: 32px; display: flex; flex-direction: column; gap: 1px; overflow: auto; padding-right: 2px; }
.model-menu-item { width: 100%; min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 6px 7px; color: #b8c5c7; background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left; }
.model-menu-item:hover { color: #ffffff; background: rgba(255,255,255,.06); }
.model-menu-item > svg { width: 14px; height: 14px; color: #79c9ca; flex: 0 0 auto; }
.model-menu-item span { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.model-menu-item strong, .model-menu-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-menu-item strong { font-size: 10px; }
.model-menu-item small { color: #788a8e; font-size: 8px; }
.nav-divider { height: 1px; margin: 8px 10px; background: rgba(218, 231, 231, .12); }
.project-entry-divider { margin: 14px 10px 8px; }
.sidebar-footer { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid rgba(218, 231, 231, .12); }
.user-session { display: flex; align-items: center; justify-content: flex-start; min-width: 0; padding-left: 4px; }
.user-session-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.user-session-copy span { color: var(--rail-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.user-session-copy strong { overflow: hidden; color: var(--rail-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout-button { height: 30px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 11px; padding: 0; color: #c9d6d8; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 800; }
.sidebar-logout-button:hover { color: #ffffff; background: rgba(113,211,210,.12); border-color: rgba(113,211,210,.3); }
.sidebar-logout-button strong { overflow: hidden; max-width: 120px; color: inherit; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout-button svg { width: 17px; height: 17px; }
.profile-button { display: flex; align-items: center; gap: 9px; padding: 7px 3px 0; color: var(--rail-text); border-top: 1px solid rgba(218, 231, 231, .12); }
.profile-avatar { width: 22px; height: 22px; display: grid; place-items: center; color: #1b252a; background: #d9eeeb; border-radius: 50%; font-size: 10px; font-weight: 700; }
.profile-name { flex: 1; font-size: 11px; }
.profile-button svg { width: 15px; height: 15px; color: var(--rail-muted); }
.sidebar-resize-handle { position: absolute; top: 0; right: -3px; z-index: 20; width: 6px; height: 100%; cursor: col-resize; }
.sidebar-resize-handle:hover, body.sidebar-resizing .sidebar-resize-handle { background: rgba(113,211,210,.2); }
body.sidebar-resizing, body.sidebar-resizing * { cursor: col-resize !important; user-select: none !important; }

.main-shell { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.topbar { height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar-context, .topbar-actions, .breadcrumb, .canvas-meta, .page-view-head { display: flex; align-items: center; }
.topbar-context { min-width: 0; flex: 1; gap: 8px; }
.topbar-actions { flex: 0 0 auto; gap: 8px; }
.breadcrumb { min-width: 0; gap: 8px; overflow: hidden; color: var(--muted); font-size: 11px; }
.breadcrumb svg { width: 13px; height: 13px; }
.breadcrumb span, .breadcrumb strong, .breadcrumb-link, .breadcrumb-current { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb strong, .breadcrumb-current { max-width: 160px; color: var(--ink); font-size: 12px; }
.breadcrumb-link { max-width: 150px; padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit; }
.breadcrumb-current { padding: 0; background: transparent; border: 0; cursor: pointer; font-weight: 800; }
.breadcrumb-link:hover, .breadcrumb-current:hover { color: var(--cyan); }
.topbar-context > [data-breadcrumb-back] { flex: 0 0 auto; }
.canvas-id-pill { max-width: 170px; display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 24px; padding: 0 9px; color: #557176; background: #eef5f5; border: 1px solid var(--soft-line); border-radius: 999px; font-size: 9px; font-weight: 700; }
.service-status { height: 28px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 0 9px; color: #5e7277; background: #ffffff; border: 1px solid var(--line); border-radius: 6px; font-size: 10px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.service-status svg { width: 13px; height: 13px; stroke-width: 2; }
.service-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 999px; background: #9aacb0; }
.service-status.online { color: #24714b; border-color: rgba(37, 122, 79, .28); background: #f0fbf4; }
.service-status.online .service-dot { background: #2f9e62; box-shadow: 0 0 0 3px rgba(47, 158, 98, .13); }
.service-status.connecting { color: #8b651e; border-color: rgba(213, 149, 37, .32); background: #fff8e8; }
.service-status.connecting .service-dot { background: #d59525; animation: servicePulse 1.05s ease-in-out infinite; }
.service-status.preview { color: #6d5b16; border-color: rgba(167, 143, 45, .34); background: #fffbe8; }
.service-status.preview .service-dot { background: #b99f2f; }
.service-status.offline { color: #9b3e49; border-color: rgba(189, 76, 90, .3); background: #fff2f4; }
.service-status.offline .service-dot { background: #bd4c5a; }
@keyframes servicePulse { 0%, 100% { transform: scale(.86); opacity: .58; } 50% { transform: scale(1.18); opacity: 1; } }
.save-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.save-indicator span { width: 6px; height: 6px; border-radius: 50%; background: #55bf89; }
.canvas-agent-toggle { position: relative; }
.canvas-agent-toggle.active { color: #176f76; background: #eef8f8; border-color: #9dcecf; }
.canvas-agent-toggle svg { width: 14px; height: 14px; }
.canvas-agent-status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #45b77c; box-shadow: 0 0 0 3px rgba(69,183,124,.12); }
.canvas-tool-launcher.active { color: #176f76; background: #eef8f8; border-color: #9dcecf; }
.canvas-tool-launcher svg { width: 15px; height: 15px; }
.icon-button, .outline-button, .run-button, .canvas-meta-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; cursor: pointer; }
.icon-button { width: 32px; height: 32px; color: var(--muted); background: transparent; border-radius: 6px; }
.icon-button:hover { color: var(--ink); background: #eef4f4; }
.icon-button svg { width: 16px; height: 16px; stroke-width: 1.8; }
.icon-button.tiny { width: 25px; height: 25px; }
.icon-button.tiny svg { width: 14px; height: 14px; }
.outline-button, .run-button { height: 34px; padding: 0 12px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.outline-button { color: var(--ink); background: var(--paper); border-color: var(--line); }
.outline-button:hover { background: #f2f7f7; }
.run-button { color: #ffffff; background: var(--ink); }
.run-button:hover { background: #31434a; }
.outline-button svg, .run-button svg, .canvas-meta-button svg { width: 15px; height: 15px; }
.toolbar-divider { width: 1px; height: 22px; background: var(--line); }
.mobile-menu { display: none; }

.workspace { min-height: 0; position: relative; flex: 1; overflow: hidden; background: var(--canvas); }
.canvas-view { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.canvas-view:active { cursor: grabbing; }
.canvas-grid { position: absolute; inset: 0; background-color: var(--canvas); background-image: radial-gradient(#cfdbdc 1px, transparent 1px); background-size: 24px 24px; opacity: .75; }
.canvas-grid::after { content: ""; position: absolute; inset: 0; background: rgba(245,248,248,.42); pointer-events: none; }
.canvas-meta { position: absolute; top: 22px; right: 24px; left: 24px; justify-content: space-between; z-index: 2; pointer-events: none; }
.canvas-meta > * { pointer-events: auto; }
.eyebrow { color: var(--muted); }
.canvas-meta h1 { margin: 7px 0 0; color: var(--ink); font-size: 12px; letter-spacing: 0; }
.canvas-meta p { max-width: 420px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.canvas-meta-button { height: 34px; padding: 0 11px; color: var(--ink); background: rgba(255,255,255,.88); border-color: var(--line); border-radius: 6px; font-size: 10px; font-weight: 700; box-shadow: 0 8px 22px rgba(36,56,62,.08); }
.canvas-meta-button:hover { background: #ffffff; }
.canvas-title-switch { position: relative; min-width: 0; max-width: min(520px, calc(100vw - 420px)); }
.canvas-title-button { max-width: 100%; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--ink); background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 16px rgba(36,56,62,.08); cursor: pointer; font: inherit; font-weight: 800; }
.canvas-title-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-title-button svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.canvas-title-button:hover { border-color: rgba(30,158,170,.42); background: #ffffff; }
.canvas-title-button:hover, .canvas-title-button:hover svg { color: var(--cyan); }
.canvas-switch-menu { position: absolute; top: calc(100% + 10px); left: 0; width: 264px; max-height: min(420px, calc(100vh - 190px)); overflow: auto; padding: 7px; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 18px 48px rgba(31,52,59,.18); }
.canvas-switch-label { padding: 7px 7px 5px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.canvas-switch-row, .canvas-switch-folder-row { width: 100%; min-height: 30px; display: grid; grid-template-columns: 17px minmax(0, 1fr) auto 14px; align-items: center; gap: 7px; padding: 0 7px; color: #52666c; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; text-align: left; }
.canvas-switch-row { grid-template-columns: 17px minmax(0, 1fr) auto; }
.canvas-switch-row:hover, .canvas-switch-row.active, .canvas-switch-folder-row:hover { color: var(--ink); background: #f2f8f8; border-color: var(--soft-line); }
.canvas-switch-row.active { border-color: rgba(30,158,170,.38); }
.canvas-switch-row svg, .canvas-switch-folder-row svg { width: 14px; height: 14px; color: var(--cyan); }
.canvas-switch-row span, .canvas-switch-folder-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; }
.canvas-switch-row small, .canvas-switch-folder-row small { color: var(--muted); font-size: 8px; white-space: nowrap; }
.canvas-switch-chevron { color: var(--muted) !important; }
.canvas-switch-folder-row[aria-expanded="true"] .canvas-switch-chevron { transform: rotate(180deg); }
.canvas-switch-children { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 15px; padding-left: 6px; border-left: 1px solid var(--soft-line); }
.canvas-switch-empty { padding: 12px 8px; color: var(--muted); font-size: 10px; }
.canvas-switch-empty.compact { padding: 6px 8px; }
.canvas-tool-compass { position: absolute; top: 124px; left: 28px; z-index: 7; width: 118px; height: 118px; overflow: visible; cursor: grab; user-select: none; }
.canvas-tool-compass, .canvas-tool-compass * { box-sizing: border-box; }
.compass-shell { position: absolute; inset: 0; border-radius: 50%; background: transparent; border: 1px solid transparent; box-shadow: none; backdrop-filter: none; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, backdrop-filter .18s ease; }
.canvas-tool-compass:hover .compass-shell, .canvas-tool-compass.hovered .compass-shell, .canvas-tool-compass.expanded .compass-shell, .canvas-tool-compass.open .compass-shell { background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.94), rgba(239,250,250,.72) 28%, rgba(210,230,232,.58) 64%, rgba(43,58,63,.14)); border-color: rgba(98,132,138,.32); box-shadow: 0 18px 40px rgba(31,52,59,.18), inset 0 0 0 1px rgba(255,255,255,.72); backdrop-filter: blur(14px); }
.compass-shell::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.68); box-shadow: inset 0 0 20px rgba(30,158,170,.08); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.compass-shell::after { content: ""; position: absolute; left: 14px; top: 13px; width: 32px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.58); filter: blur(.2px); opacity: 0; transform: rotate(-28deg); pointer-events: none; transition: opacity .18s ease; }
.canvas-tool-compass:hover .compass-shell::before, .canvas-tool-compass:hover .compass-shell::after, .canvas-tool-compass.hovered .compass-shell::before, .canvas-tool-compass.hovered .compass-shell::after, .canvas-tool-compass.expanded .compass-shell::before, .canvas-tool-compass.expanded .compass-shell::after, .canvas-tool-compass.open .compass-shell::before, .canvas-tool-compass.open .compass-shell::after { opacity: 1; }
.compass-core, .compass-segment, .compass-orbit-tool { display: grid; place-items: center; padding: 0; border: 0; }
.compass-core { position: absolute; left: 50%; top: 50%; z-index: 3; width: 44px; height: 44px; color: #ffffff; background: linear-gradient(135deg, #176d5f, #1ea66f); border-radius: 50%; box-shadow: 0 10px 24px rgba(30,166,111,.28), inset 0 0 0 1px rgba(255,255,255,.2); cursor: grab; transform: translate(-50%, -50%); }
.compass-core:hover { background: linear-gradient(135deg, #126154, #20b978); }
.compass-core svg { width: 17px; height: 17px; }
.canvas-tool-compass-dragging, .canvas-tool-compass-dragging * { cursor: grabbing !important; }
.compass-segment { position: absolute; z-index: 2; width: 38px; height: 38px; color: #64787d; background: rgba(255,255,255,.72); border: 1px solid rgba(96,117,122,.18); border-radius: 15px; box-shadow: 0 8px 18px rgba(31,52,59,.1); cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.72); transition: opacity .16s ease, transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease; }
.compass-segment svg { width: 15px; height: 15px; }
.compass-segment:hover, .compass-segment.active { transform: translateY(-1px) scale(1.05); border-color: rgba(30,158,170,.32); }
.canvas-tool-compass:hover .compass-segment, .canvas-tool-compass.hovered .compass-segment, .canvas-tool-compass.expanded .compass-segment, .canvas-tool-compass.open .compass-segment { opacity: 1; pointer-events: auto; transform: scale(1); }
.canvas-tool-compass:hover .compass-segment:hover, .canvas-tool-compass.hovered .compass-segment:hover, .canvas-tool-compass.expanded .compass-segment:hover, .canvas-tool-compass.open .compass-segment:hover, .canvas-tool-compass.expanded .compass-segment.active, .canvas-tool-compass.open .compass-segment.active { transform: translateY(-1px) scale(1.05); }
.segment-0 { left: 40px; top: 8px; color: #1e7f8a; }
.segment-1 { right: 10px; top: 58px; color: #7057c6; }
.segment-2 { left: 10px; top: 58px; color: #b68125; }
.segment-0.active, .segment-0:hover { background: #eaf8f7; }
.segment-1.active, .segment-1:hover { background: #f1edff; }
.segment-2.active, .segment-2:hover { background: #fff5e4; }
.compass-orbit { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; pointer-events: none; }
.compass-orbit::before { content: ""; position: absolute; left: 18px; top: -76px; width: 154px; height: 152px; border: 1px solid rgba(30,158,170,.16); border-left-color: transparent; border-radius: 50%; transform: rotate(-14deg); pointer-events: none; }
.canvas-tool-compass.hovered .compass-orbit, .canvas-tool-compass.expanded .compass-orbit, .canvas-tool-compass.open .compass-orbit { pointer-events: auto; }
.canvas-tool-compass.hovered .compass-orbit::before, .canvas-tool-compass.expanded .compass-orbit::before, .canvas-tool-compass.open .compass-orbit::before { pointer-events: auto; }
.compass-orbit.orbit-left::before { left: -172px; top: -76px; border-color: rgba(30,158,170,.16); border-right-color: transparent; transform: rotate(14deg); }
.compass-orbit.orbit-bottom::before { left: -76px; top: 18px; width: 152px; height: 154px; border-color: rgba(30,158,170,.16); border-top-color: transparent; transform: rotate(-14deg); }
.compass-orbit.orbit-top::before { left: -76px; top: -172px; width: 152px; height: 154px; border-color: rgba(30,158,170,.16); border-bottom-color: transparent; transform: rotate(14deg); }
.compass-orbit.orbit-bottom-right::before { left: 16px; top: 16px; width: 136px; height: 136px; border-color: rgba(30,158,170,.16); border-left-color: transparent; border-top-color: transparent; transform: rotate(-8deg); }
.compass-orbit.orbit-bottom-left::before { left: -152px; top: 16px; width: 136px; height: 136px; border-color: rgba(30,158,170,.16); border-right-color: transparent; border-top-color: transparent; transform: rotate(8deg); }
.compass-orbit.orbit-top-right::before { left: 16px; top: -152px; width: 136px; height: 136px; border-color: rgba(30,158,170,.16); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(8deg); }
.compass-orbit.orbit-top-left::before { left: -152px; top: -152px; width: 136px; height: 136px; border-color: rgba(30,158,170,.16); border-right-color: transparent; border-bottom-color: transparent; transform: rotate(-8deg); }
.compass-orbit-tool { position: absolute; left: var(--orbit-x); top: var(--orbit-y); z-index: 4; width: 38px; height: 38px; color: #52666c; background: rgba(255,255,255,.9); border: 1px solid rgba(96,117,122,.2); border-radius: 50%; box-shadow: 0 12px 26px rgba(31,52,59,.16); cursor: pointer; pointer-events: auto; opacity: 0; transform: translate(-50%, -50%) scale(.72); animation: compassToolIn .22s ease forwards; animation-delay: var(--orbit-delay); }
.compass-orbit-tool:hover { color: #ffffff; background: #1e9eaa; border-color: rgba(30,158,170,.55); }
.compass-orbit-tool:disabled { opacity: .34 !important; cursor: not-allowed; filter: grayscale(.45); }
.compass-orbit-tool svg { width: 16px; height: 16px; }
.compass-orbit-tool::after { content: attr(aria-label); position: absolute; left: 44px; top: 50%; max-width: 148px; padding: 5px 7px; overflow: hidden; color: #ffffff; background: rgba(38,55,60,.92); border-radius: 5px; box-shadow: 0 8px 18px rgba(31,52,59,.16); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(4px, -50%); transition: opacity .14s ease, transform .14s ease; }
.compass-orbit-tool:hover::after { opacity: 1; transform: translate(0, -50%); }
.compass-orbit.orbit-left .compass-orbit-tool::after { left: auto; right: 44px; transform: translate(-4px, -50%); }
.compass-orbit.orbit-left .compass-orbit-tool:hover::after { transform: translate(0, -50%); }
.compass-orbit.orbit-bottom-left .compass-orbit-tool::after, .compass-orbit.orbit-top-left .compass-orbit-tool::after { left: auto; right: 44px; transform: translate(-4px, -50%); }
.compass-orbit.orbit-bottom-left .compass-orbit-tool:hover::after, .compass-orbit.orbit-top-left .compass-orbit-tool:hover::after { transform: translate(0, -50%); }
.compass-orbit.orbit-top .compass-orbit-tool::after { left: 50%; top: 44px; transform: translate(-50%, 4px); }
.compass-orbit.orbit-top .compass-orbit-tool:hover::after { transform: translate(-50%, 0); }
.compass-orbit.orbit-bottom .compass-orbit-tool::after { left: 50%; top: auto; bottom: 44px; transform: translate(-50%, -4px); }
.compass-orbit.orbit-bottom .compass-orbit-tool:hover::after { transform: translate(-50%, 0); }
@keyframes compassToolIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.canvas-tool-drawer { display: flex; flex-direction: column; gap: 8px; }
.canvas-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.canvas-tool-card { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px; color: var(--ink); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; cursor: pointer; text-align: left; }
.canvas-tool-card:hover { border-color: rgba(30,158,170,.38); background: #f5fbfb; }
.canvas-tool-card > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--cyan); background: var(--cyan-soft); border-radius: 6px; }
.canvas-tool-card svg { width: 15px; height: 15px; }
.canvas-tool-card strong { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.canvas-origin { position: absolute; top: 210px; left: clamp(80px, 18vw, 270px); width: 6000px; height: 4000px; z-index: 2; transform-origin: 0 0; will-change: transform; contain: layout style; }
.canvas-node { --canvas-node-radius: 12px; --canvas-node-inner-radius: 12px; position: absolute; z-index: 2; width: 276px; overflow: visible; box-sizing: border-box; background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: var(--canvas-node-radius); box-shadow: 0 16px 42px rgba(31,52,59,.12); }
.node-shell-body { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: auto; background: inherit; border-radius: inherit; }
.node-shell-body::-webkit-scrollbar { width: 8px; height: 8px; }
.node-shell-body::-webkit-scrollbar-thumb { background: rgba(98,132,138,.28); border-radius: 999px; }
.canvas-node.group-node, .canvas-node.frame-node, .canvas-node.promptGroup-node { z-index: 0; background: rgba(255,255,255,.32); border-style: dashed; box-shadow: none; }
.canvas-node.frame-node { background: rgba(233,247,247,.24); border-color: rgba(30,158,170,.46); }
.canvas-node.frame-node .node-shell-body { overflow: visible; background: transparent; }
.frame-node-header { min-height: 36px; height: 36px; padding: 4px 9px; background: transparent; border-bottom: 0; }
.frame-node-title-input { max-width: min(70%, 320px); height: 27px; padding: 0 3px; color: var(--frame-title-color, #365f66); font-size: var(--frame-title-font-size, 14px); font-weight: 900; }
.frame-node-title-input:focus { background: rgba(255,255,255,.9); border-color: color-mix(in srgb, var(--frame-title-color, #365f66) 45%, var(--soft-line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--frame-title-color, #365f66) 12%, transparent); }
.frame-title-style-panel { right: 8px; }
.canvas-node.group-node .node-port, .canvas-node.frame-node .node-port, .canvas-node.promptGroup-node .node-port { display: none; }
.canvas-node.selected { outline: 1px solid var(--cyan); outline-offset: 1px; }
.canvas-node.selected:not(.group-node):not(.frame-node):not(.promptGroup-node) { z-index: 8; }
.canvas-node .node-header { cursor: grab; user-select: none; }
.canvas-node .node-header:active { cursor: grabbing; }
.canvas-node .comfy-node-topbar { cursor: grab; user-select: none; }
.canvas-node .comfy-node-topbar:active { cursor: grabbing; }
.canvas-node :is(.generation-tool-topbar, .bernini-bridge-head, .ty360pano-toolbar) { cursor: grab; user-select: none; }
.canvas-node :is(.generation-tool-topbar, .bernini-bridge-head, .ty360pano-toolbar):active { cursor: grabbing; }
.node-header-actions { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.node-collapse-button { width: 25px; height: 25px; display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.node-collapse-button:hover { color: var(--ink); background: #eef4f4; border-color: var(--soft-line); }
.node-collapse-button svg { width: 14px; height: 14px; }
.canvas-dragging, .canvas-dragging * { cursor: grabbing !important; }
.canvas-panning, .canvas-panning * { cursor: grabbing !important; }
.canvas-resizing, .canvas-resizing * { cursor: nwse-resize !important; }
body.canvas-selecting, body.canvas-selecting * { cursor: crosshair !important; }
body.canvas-knife, body.canvas-knife * { cursor: crosshair !important; }
body.canvas-dragging *, body.canvas-panning *, body.canvas-resizing *, body.canvas-selecting *, body.canvas-knife * { user-select: none !important; }
.canvas-node.node-drag-transform { will-change: transform; }
body.canvas-resizing .canvas-node { will-change: left, top, width, height; }
body.canvas-panning .canvas-node,
body.canvas-panning .connection-layer,
body.canvas-panning .connection-focus-layer,
body.canvas-panning .connection-control-layer,
body.canvas-panning .canvas-connection,
body.canvas-panning .canvas-connection-hit,
body.canvas-panning .connection-cut { pointer-events: none !important; }
body.canvas-knife .canvas-node,
body.canvas-knife .canvas-connection-hit,
body.canvas-knife .connection-cut { pointer-events: none !important; }
body.canvas-dragging .canvas-node :is(.node-shell-body, .node-header, .media-node-preview, .media-edit-toolbar, .media-timeline-toolbar),
body.canvas-resizing .canvas-node :is(.node-shell-body, .node-header, .media-node-preview, .media-edit-toolbar, .media-timeline-toolbar) { pointer-events: none !important; }
/* A node drag only needs the affected SVG paths. Disable connection hit
   targets and cut controls while the pointer is down so nearby links cannot
   trigger hover style work during every drag frame. */
body.canvas-dragging .canvas-connection-hit,
body.canvas-dragging .connection-cut { pointer-events: none !important; }
/* The thumbnail is already a fixed-size raster. Avoid re-rasterizing media
   layers and mask overlays while their parent is translated each frame. */
body.canvas-dragging .canvas-node.node-drag-transform .media-node-preview img,
body.canvas-dragging .canvas-node.node-drag-transform .media-node-preview video {
  backface-visibility: hidden;
  transform: translateZ(0);
}
body.canvas-dragging .media-card-node :is(.media-edit-toolbar, .media-timeline-toolbar, .media-delete-button, .media-grid-handle, .media-dims-tag, .media-mask-badge),
body.canvas-panning .media-card-node :is(.media-edit-toolbar, .media-timeline-toolbar, .media-delete-button, .media-grid-handle, .media-dims-tag, .media-mask-badge),
body.canvas-resizing .media-card-node :is(.media-edit-toolbar, .media-timeline-toolbar, .media-delete-button, .media-grid-handle, .media-dims-tag, .media-mask-badge) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none !important; }
.canvas-node :is(.node-fields, .node-note, .node-editor, .prompt-content, .llm-card-body, .media-node-body, .system-node-pills, .system-node-summary) { content-visibility: auto; contain-intrinsic-size: 180px; }
.canvas-node.node-body-deferred { min-height: 72px; }
.canvas-node .node-lod-summary { position: absolute; left: 12px; right: 12px; top: 52px; bottom: 12px; z-index: 4; display: none; min-height: 0; flex-direction: column; gap: 8px; overflow: hidden; padding: 10px; color: #5f7378; background: linear-gradient(180deg, #fbfdfd, #f1f6f6); border: 1px solid var(--soft-line); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(30,158,170,.04); pointer-events: none; user-select: none; }
.canvas-node .node-lod-summary.node-lod-thumbnail { left: 10px; right: 10px; top: 10px; bottom: 10px; display: none; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.canvas-node .node-lod-thumbnail img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 6px; box-shadow: none; }
.canvas-node .node-lod-thumbnail-empty { width: 48px; height: 48px; display: grid; place-items: center; color: rgba(96,118,124,.62); background: rgba(235,243,243,.72); border: 1px solid rgba(174,196,199,.62); border-radius: 12px; }
.canvas-node .node-lod-thumbnail-empty svg { width: 22px; height: 22px; }
.canvas-node.node-body-deferred:not(.node-full-detail) .node-lod-summary { display: flex; }
.canvas-node.node-body-deferred .node-shell-header { position: relative; z-index: 5; min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; overflow: hidden; color: var(--ink); background: rgba(255,255,255,.9); border-bottom: 1px solid var(--soft-line); }
.canvas-node.node-body-deferred .node-shell-header .node-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.canvas-node.node-body-deferred .node-shell-header .node-icon svg { width: 13px; height: 13px; }
.canvas-node.node-body-deferred .node-shell-header strong { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.canvas-node.node-body-deferred .node-shell-header small { flex: 0 0 auto; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.canvas-node.node-body-deferred .node-lod-summary.node-lod-thumbnail { top: 35px; }
.canvas-node.node-drag-low-detail { contain: layout paint; box-shadow: 0 9px 22px rgba(31,52,59,.09); }
.canvas-node.node-drag-low-detail .node-shell-body { overflow: hidden; }
.canvas-node.node-drag-low-detail .node-lod-summary { display: none !important; }
.canvas-node.node-drag-low-detail :is(.node-fields, .node-note, .node-run, .node-editor, .prompt-content, .llm-card-body, .media-node-body, .node-footer, .system-node-pills, .system-node-summary) { content-visibility: visible; }
.canvas-node.node-drag-low-detail :is(input, textarea, select, button:not(.node-menu):not(.node-resize-handle):not(.node-port)) { pointer-events: none !important; }
.canvas-node.node-drag-low-detail .node-resize-handle { opacity: 0; pointer-events: none; }
/* Shell nodes contain only the fixed header/icon above; no synthetic field
   card or run button is generated at this level. */
/* Never let a stale pre-thumbnail summary expose the old synthetic editor
   frame during a zoom transition. */
.canvas-node.node-body-deferred:not(.node-full-detail) .node-lod-summary:not(.node-lod-thumbnail) { display: none !important; }
/* A zoom transition can leave the deferred class on a shell for one frame
   after its real body has mounted. Never stack the LOD card over that body. */
.canvas-node.node-body-deferred .node-shell-body { display: flex !important; background: transparent; pointer-events: none; }
.canvas-node.node-body-deferred .node-lod-summary.node-lod-thumbnail { display: flex !important; }
.canvas-node:not(.node-body-deferred) .node-lod-summary.node-lod-thumbnail { display: none !important; }
.canvas-node.node-body-deferred { background: rgba(247,251,251,.82); border-style: dashed; border-color: rgba(98,132,138,.34); box-shadow: none; }
.media-image-placeholder, .media-output-tile-placeholder { min-width: 0; min-height: 72px; display: grid; place-items: center; gap: 6px; color: rgba(96,118,124,.7); background: rgba(235,243,243,.72); border: 1px dashed rgba(174,196,199,.72); border-radius: 10px; font-size: 10px; font-weight: 750; }
.media-image-placeholder { width: 100%; height: 100%; flex: 1 1 auto; }
.media-image-placeholder svg, .media-output-tile-placeholder svg { width: 22px; height: 22px; }
.media-output-tile-placeholder { width: 100%; height: 100%; border: 0; border-radius: 0; }
.node-resize-handle { position: absolute; right: -9px; bottom: -9px; z-index: 8; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; color: #6c8589; background: #f8fbfb; border: 1px solid rgba(98,132,138,.28); border-radius: 999px; cursor: nwse-resize; opacity: 0; box-shadow: 0 6px 16px rgba(31,52,59,.16); transition: opacity .14s ease, color .14s ease, border-color .14s ease, background .14s ease; }
.canvas-node:hover .node-resize-handle, .canvas-node.selected .node-resize-handle { opacity: 1; }
.node-resize-handle:hover { color: var(--cyan); background: #ffffff; border-color: var(--cyan); }
.node-resize-handle svg { width: 13px; height: 13px; }
.prompt-node { top: 10px; left: 0; }
.comfy-node { top: 40px; left: 390px; }
.image-node { top: 260px; left: 390px; width: 300px; }
.node-header, .image-node-footer, .node-footer { display: flex; align-items: center; gap: 9px; }
.node-header { padding: 12px; border-bottom: 1px solid var(--soft-line); border-radius: calc(var(--canvas-node-radius, 22px) - 1px) calc(var(--canvas-node-radius, 22px) - 1px) 0 0; overflow: hidden; }
.node-header > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.node-header > .node-header-actions { flex: 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; gap: 5px; margin-left: auto; }
.node-header strong, .image-node-footer strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.node-header small, .image-node-footer small { color: var(--muted); font-size: 9px; }
.generation-node-header { align-items: center; }
.generation-node-selectors { min-width: 0; flex: 0 1 188px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
.node-header > .generation-node-selectors { flex: 0 1 188px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
.generation-node-selectors select { min-width: 0; width: 100%; height: 27px; padding: 0 6px; color: #385057; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 5px; font: inherit; font-size: 9px; font-weight: 850; outline: none; }
.generation-node-selectors select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.node-run-icon { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; color: #ffffff; background: #111827; border: 0; border-radius: 6px; cursor: pointer; }
.node-run-icon:hover { background: #1e9eaa; }
.node-run-icon svg { width: 13px; height: 13px; }
.node-run-icon:disabled { cursor: wait; opacity: .78; }
.node-run-icon.is-running svg { animation: node-run-spin .85s linear infinite; }
@keyframes node-run-spin { to { transform: rotate(360deg); } }
.node-delete-button { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #9b3e49; background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.node-delete-button:hover { color: #a33c3c; background: #fff0f0; border-color: rgba(189,76,90,.28); }
.node-delete-button svg { width: 14px; height: 14px; }
.node-icon { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 6px; }
.node-icon svg { width: 15px; height: 15px; }
.node-icon.amber { color: #aa7420; background: var(--amber-soft); }
.node-icon.cyan { color: #187e88; background: var(--cyan-soft); }
.node-icon.violet { color: #6554c0; background: #ebe8ff; }
.node-icon.green { color: #257a4f; background: #e3f6ec; }
.prompt-content { min-height: 108px; padding: 13px; color: #506169; font-size: 10px; line-height: 1.65; }
.node-footer { justify-content: space-between; padding: 9px 12px; color: var(--faint); border-top: 1px solid var(--soft-line); font-size: 9px; }
.node-footer svg { width: 13px; height: 13px; color: var(--cyan); }
.node-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 13px; }
.node-fields div { min-width: 0; padding: 8px; background: #f3f7f7; border-radius: 5px; }
.node-fields span, .node-fields strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-fields span { color: var(--muted); font-size: 8px; }
.node-fields strong { margin-top: 4px; color: var(--ink); font-size: 9px; }
.node-run { width: calc(100% - 26px); height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 13px 13px; color: #ffffff; background: var(--cyan); border: 0; border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 700; }
.node-run:hover { background: #187e88; }
.node-run svg { width: 13px; height: 13px; }
.node-run-compact { width: 42px; height: 24px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border-radius: 6px; font-size: 9px; font-weight: 850; line-height: 1; letter-spacing: 0; }
.node-run-compact:focus-visible { outline: 2px solid rgba(30,158,170,.52); outline-offset: 2px; }
.node-chain-run { min-width: 62px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 6px; color: #1f7d84; background: #e9f7f7; border: 1px solid rgba(30,158,170,.28); border-radius: 6px; cursor: pointer; font: inherit; font-size: 8px; font-weight: 850; line-height: 1; white-space: nowrap; }
.node-chain-run:hover { color: #ffffff; background: var(--cyan); border-color: var(--cyan); }
.node-chain-run:disabled { cursor: wait; opacity: .7; }
.node-chain-run svg { width: 12px; height: 12px; flex: 0 0 auto; }
.node-chain-run.is-running svg { animation: node-run-spin .85s linear infinite; }
.node-loop-run { min-width: 92px; color: #8a5a0a; background: #fff8eb; border-color: #efd9a9; }
.node-loop-run:hover { color: #ffffff; background: #b7791f; border-color: #b7791f; }
.node-loop-run.has-error { color: #a6424e; background: #fff3f4; border-color: rgba(189,76,90,.28); }
.node-loop-run.has-error:hover { color: #ffffff; background: #bd4c5a; border-color: #bd4c5a; }
.node-loop-run.is-cancelled { color: #71868b; background: #f3f5f7; border-color: #d4dde1; }
.node-loop-run.is-cancelled:hover { color: #ffffff; background: #71868b; border-color: #71868b; }
.canvas-chain-status { flex: 0 0 auto; min-width: 0; margin: 0 13px 12px; padding: 8px 9px; color: #4e666d; background: #f7fbfb; border: 1px solid #dbe9e9; border-radius: 8px; }
.canvas-chain-status-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.canvas-chain-status-head > span { min-width: 0; display: inline-flex; align-items: center; gap: 4px; color: #2c7e84; font-size: 9px; font-weight: 850; }
.canvas-chain-status-head > span svg { width: 12px; height: 12px; }
.canvas-chain-status-head > strong { flex: 0 0 auto; color: #71868b; font-size: 8px; font-weight: 750; }
.canvas-chain-status-list { min-width: 0; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.canvas-chain-status-row { min-width: 0; display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; gap: 5px; align-items: center; min-height: 19px; }
.canvas-chain-status-dot { width: 15px; height: 15px; display: grid; place-items: center; color: #9aaeb2; }
.canvas-chain-status-dot svg { width: 11px; height: 11px; }
.canvas-chain-status-name { min-width: 0; overflow: hidden; color: #536a70; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.canvas-chain-status-row > strong { color: #8b9ca0; font-size: 8px; font-weight: 750; white-space: nowrap; }
.canvas-chain-status-row.running .canvas-chain-status-dot { color: var(--cyan); }
.canvas-chain-status-row.running .canvas-chain-status-dot svg { animation: node-run-spin .85s linear infinite; }
.canvas-chain-status-row.done .canvas-chain-status-dot,
.canvas-chain-status-row.done > strong { color: #2f8b63; }
.canvas-chain-status-row.failed .canvas-chain-status-dot,
.canvas-chain-status-row.failed > strong { color: #bd4c5a; }
.canvas-chain-status-row.blocked .canvas-chain-status-dot,
.canvas-chain-status-row.blocked > strong { color: #a7834b; }
.canvas-chain-status-error { margin: 5px 0 0; overflow: hidden; color: #a6424e; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.node-run.dark { background: #233138; }
.node-run.dark:hover { background: #111b20; }
.node-run.green-run { background: #2a8b61; }
.node-run.green-run:hover { background: #1f704c; }
.comfy-node-topbar { min-width: 0; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px 3px; }
.comfy-topbar-title { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.comfy-topbar-title .node-icon { width: 28px; height: 28px; border-radius: 7px; }
.comfy-topbar-title .node-icon svg { width: 15px; height: 15px; }
.comfy-topbar-title strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.comfy-generation-header { align-items: center; gap: 8px; padding: 4px 18px 10px; min-height: 44px; border-radius: 0; }
.comfy-generation-header .node-icon { width: 28px; height: 28px; border-radius: 7px; }
.comfy-generation-header .node-icon svg { width: 15px; height: 15px; }
.comfy-type-block { flex: 0 0 auto; padding: 0; }
.node-header > .comfy-type-block { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; padding: 0; }
.comfy-type-block strong { color: var(--ink); font-size: 12px; font-weight: 900; }
.comfy-title-block { flex: 1 1 150px; padding-top: 5px; }
.comfy-title-block strong { font-size: 13px; }
.comfy-title-block small { margin-top: 3px; font-size: 10px; }
.comfy-generation-header .generation-node-selectors { flex: 1 1 auto; grid-template-columns: 86px minmax(0, 1fr); gap: 6px; }
.comfy-generation-header .generation-node-selectors select { height: 30px; padding: 0 10px; color: var(--muted); border-radius: 7px; font-size: 11px; font-weight: 400; }
.comfy-generation-header .generation-category-select { width: 100%; min-width: 0; }
.comfy-generation-header .generation-workflow-select { width: 100%; min-width: 0; }
.comfy-workflow-refresh-button { width: 30px; height: 30px; display: inline-grid; place-items: center; flex: 0 0 30px; padding: 0; color: var(--muted); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; cursor: pointer; }
.comfy-workflow-refresh-button:hover, .comfy-workflow-refresh-button:focus-visible { color: var(--ink); border-color: var(--cyan); outline: none; box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.comfy-workflow-refresh-button:disabled { opacity: .5; cursor: not-allowed; }
.comfy-workflow-refresh-button svg { width: 14px; height: 14px; }
.comfy-workflow-refresh-button.is-loading svg { animation: node-run-spin .85s linear infinite; }
.comfy-generation-header .api-model-first-selectors { grid-template-columns: minmax(0, 1fr) 92px; }
.comfy-generation-header .api-model-first-selectors .generation-workflow-select { min-width: 0; }
.comfy-generation-header .api-model-first-selectors .generation-category-select { width: 92px; min-width: 92px; max-width: 92px; }
/* ⚠️ 画布 API 生图：平台选择已改回**普通下拉框**（第一项 Auto = 自动）。
   原先「高级」按钮 + 浮层那套样式（.generation-node-advanced-wrap / -platform / -row /
   .generation-node-platform-option）已全部移除 —— 那套方案在节点重绘下不稳定。 */
.api-generation-header { padding-right: 18px; overflow: visible; }
/* ⚠️ 上次运行实际命中的平台（只读）：✓ 一次成功；↻ 自动切换过 */
.api-run-hit { max-width: 96px; padding: 0 5px; color: #127b84; background: #edf9f8; border: 1px solid rgba(30, 158, 170, .22); border-radius: 5px; font-size: 8px; font-weight: 850; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comfy-header-actions { min-width: max-content; padding-top: 0; flex-wrap: nowrap; white-space: nowrap; }
.comfy-run-warning { min-width: 24px; height: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; color: #8a5a0a; background: #fff8eb; border: 1px solid #efd9a9; border-radius: 6px; font-size: 9px; font-weight: 850; cursor: help; }
.comfy-run-warning svg { width: 13px; height: 13px; flex: 0 0 auto; }
.comfy-run-warning span { max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comfy-run-warning.lineage-blocked { color: #9a3f3f; background: #fff1f1; border-color: #efc2c2; }
.node-run:disabled, .node-run-icon:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.25); }
.comfy-workflow-loading-state { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #5d7479; text-align: center; }
.comfy-workflow-loading-state .media-pending-spinner { width: 24px; height: 24px; border-width: 2px; }
.comfy-workflow-loading-state strong { color: #2c6269; font-size: 11px; }
.comfy-workflow-loading-state small { color: #82969a; font-size: 9px; }
.comfy-header-actions .node-collapse-button, .comfy-header-actions .node-run-icon, .comfy-header-actions .node-delete-button { width: 24px; height: 24px; border-radius: 6px; }
.comfy-header-actions .node-run-icon svg, .comfy-header-actions .node-collapse-button svg, .comfy-header-actions .node-delete-button svg { width: 12px; height: 12px; }
.api-price-button { position: relative; width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #26353a; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: help; }
.api-price-button:hover, .api-price-button:focus { color: #187e88; background: #eef8f8; border-color: rgba(30,158,170,.24); outline: none; }
.api-price-button:focus-visible { box-shadow: 0 0 0 2px rgba(30,158,170,.18); }
.api-price-button > svg { width: 17px; height: 17px; }
.api-price-tooltip { position: absolute; right: 0; top: calc(100% + 7px); z-index: 18; min-width: max-content; max-width: 260px; padding: 6px 8px; color: #eef8f8; background: #1d2a30; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; box-shadow: 0 8px 18px rgba(31,52,59,.2); font-size: 9px; font-weight: 700; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .12s ease, transform .12s ease; white-space: nowrap; }
.api-price-button:hover .api-price-tooltip, .api-price-button:focus .api-price-tooltip { opacity: 1; transform: translateY(0); }
.comfy-run-strip { padding: 16px 18px 18px; border-top: 1px solid var(--soft-line); background: #fbfdfd; }
.comfy-run-strip .comfy-node-brief { padding: 0; }
.comfy-run-strip .node-run { width: 100%; height: 36px; margin: 10px 0 0; border-radius: 7px; font-size: 12px; font-weight: 850; }
.comfy-node-brief { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 13px 0; }
.comfy-node-brief span { min-height: 30px; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: #567076; background: #f3f8f8; border: 1px solid var(--soft-line); border-radius: 7px; font-size: 10px; font-weight: 850; }
.comfy-node-brief svg { width: 13px; height: 13px; color: var(--cyan); flex: 0 0 auto; }
.node-note { margin: 0 13px 13px; padding: 10px; color: #5f7378; background: #f3f7f7; border: 1px solid var(--soft-line); border-radius: 6px; font-size: 9px; line-height: 1.55; }
.system-node-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 13px 0; }
.system-node-pills span { min-width: 0; min-height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; color: #566b72; background: #f5f8f8; border: 1px solid var(--soft-line); border-radius: 6px; font-size: 9px; font-weight: 800; }
.system-node-pills svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--cyan); }
.system-node-summary { margin: 11px 13px 13px; padding: 10px; color: #52666c; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.system-node-summary p { max-height: 74px; margin: 0; overflow: auto; font-size: 9px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.prompt-system-node { margin-top: 13px; }
.canvas-node.prompt-node { background: var(--prompt-card-bg, #ffffff); border-color: color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 36%, var(--line)); }
.canvas-node.prompt-node .node-shell-body { overflow: hidden; background: var(--prompt-card-bg, #ffffff); }
.prompt-node-header { min-height: 35px; gap: 7px; padding: 5px 8px; align-items: center; background: var(--prompt-card-bg, #ffffff); border-bottom-color: color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 22%, var(--soft-line)); }
.prompt-node-header .node-icon { width: 24px; height: 24px; color: var(--prompt-accent-color, #1e9eaa); background: color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 13%, #ffffff); }
.prompt-node-header .node-icon svg { width: 13px; height: 13px; }
.prompt-node-title-input { min-width: 0; flex: 1 1 auto; height: 26px; padding: 0 4px; overflow: hidden; color: var(--prompt-title-color, var(--ink)); background: transparent; border: 1px solid transparent; border-radius: 5px; outline: none; font: inherit; font-size: var(--prompt-title-font-size, 12px); font-weight: 900; text-overflow: ellipsis; }
.prompt-node-title-input:focus { background: rgba(255,255,255,.72); border-color: color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 45%, var(--soft-line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 14%, transparent); }
.prompt-node-title-input[readonly] { pointer-events: none; cursor: inherit; }
.prompt-node-title-input[readonly]:focus { background: transparent; border-color: transparent; box-shadow: none; }
.prompt-node-title-input:not(.editing) { user-select: none; }
.node-header > .prompt-node-head-actions { flex: 0 0 auto; min-width: auto; display: inline-flex; flex-direction: row; align-items: center; gap: 3px; margin-left: auto; }
.prompt-node-head-actions .node-delete-button { width: 24px; height: 24px; margin-left: 0; }
.prompt-node-head-button { width: 24px; height: 24px; display: inline-grid; place-items: center; color: var(--muted); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 5px; cursor: pointer; }
.prompt-node-head-button:hover, .prompt-node-head-button.active { color: var(--prompt-accent-color, #1e9eaa); border-color: color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 38%, var(--soft-line)); background: color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 9%, #ffffff); }
.prompt-node-head-button svg { width: 13px; height: 13px; }
.prompt-node-editor { flex: 1 1 auto; min-height: 0; gap: 8px; padding: 14px 10px 10px; overflow: hidden; background: var(--prompt-card-bg, #ffffff); border-top: 0; }
.prompt-preset-select { width: 100%; height: 25px; min-height: 25px; padding: 0 7px; color: #496269; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 5px; outline: none; font: inherit; font-size: 9px; }
.prompt-preset-row { width: 50%; min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: flex-start; padding: 0 8px; color: #496269; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 5px; cursor: pointer; font: inherit; font-size: 9px; font-weight: 850; text-align: left; }
.prompt-preset-row:hover { color: var(--prompt-accent-color, #1e9eaa); border-color: color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 38%, var(--soft-line)); background: color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 8%, #ffffff); }
.prompt-preset-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompt-preset-row svg { width: 12px; height: 12px; flex: 0 0 auto; }
.prompt-node-textarea { flex: 1 1 auto; min-height: 81px; width: 100%; padding: 7px 8px; color: var(--prompt-text-color, var(--ink)); background: var(--prompt-content-bg, #fbfdfd); border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: var(--prompt-font-size, 11px); line-height: 1.45; resize: none; }
.prompt-node-textarea.numbered-prompt-textarea { white-space: pre; overflow-x: hidden; overflow-y: auto; word-break: normal; }
.prompt-node-textarea.numbered-prompt-textarea.editing-numbered { white-space: pre-wrap; overflow-x: hidden; word-break: break-word; overflow-wrap: anywhere; }
.prompt-node-textarea:focus, .prompt-preset-select:focus, .prompt-preset-row:focus-visible { border-color: var(--prompt-accent-color, #1e9eaa); box-shadow: 0 0 0 2px color-mix(in srgb, var(--prompt-accent-color, #1e9eaa) 14%, transparent); }
.prompt-upstream-output { min-width: 0; flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
.prompt-upstream-output > span { color: #4f7176; font-size: 9px; font-weight: 850; }
.prompt-upstream-output textarea { width: 100%; height: 68px; min-height: 68px; padding: 7px 8px; color: #40565d; background: #f6fbfb; border: 1px solid rgba(30,158,170,.28); border-radius: 6px; outline: none; font: inherit; font-size: var(--prompt-font-size, 11px); line-height: 1.45; resize: none; }
.prompt-style-panel { position: absolute; top: 4px; right: 54px; z-index: 22; width: 178px; max-width: calc(100vw - 32px); padding: 11px 9px 9px; border: 1px solid var(--soft-line); border-radius: 12px; background: #ffffff; box-shadow: 0 18px 48px rgba(31,52,59,.18); }
.prompt-style-panel.open { background: #ffffff; }
.prompt-style-title { display: block; margin: 0 0 8px; color: #70818b; font-size: 9px; font-weight: 900; }
.prompt-style-form { display: flex; flex-direction: column; gap: 7px; }
.prompt-style-row { min-width: 0; display: grid; align-items: center; gap: 5px; color: #637683; font-size: 9px; font-weight: 900; line-height: 1.03; }
.prompt-style-row > span { white-space: nowrap; }
.prompt-style-range-row { grid-template-columns: 52px minmax(0, 1fr) 34px; }
.prompt-style-color-row { grid-template-columns: 52px minmax(0, 1fr); }
.prompt-style-color-row input[type="color"] { width: 100%; height: 20px; padding: 2px; border: 1px solid #dce7e8; border-radius: 5px; background: #ffffff; }
.prompt-style-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.prompt-style-color-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.prompt-style-color-row input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.prompt-style-range { width: 100%; height: 12px; appearance: none; -webkit-appearance: none; accent-color: #111827; background: transparent; }
.prompt-style-range::-webkit-slider-runnable-track { height: 1px; background: #111827; border-radius: 999px; }
.prompt-style-range::-webkit-slider-thumb { width: 8px; height: 8px; margin-top: -3.5px; -webkit-appearance: none; border: 0; border-radius: 999px; background: #111827; }
.prompt-style-range::-moz-range-track { height: 1px; background: #111827; border-radius: 999px; }
.prompt-style-range::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 999px; background: #111827; }
.prompt-style-size { width: 34px; height: 22px; padding: 0 3px; color: #111827; background: #ffffff; border: 1px solid #dce7e8; border-radius: 7px; outline: none; font: inherit; font-size: 9px; font-weight: 900; text-align: center; }
.prompt-style-reset { width: 100%; height: 24px; margin-top: 8px; color: #637683; background: #ffffff; border: 1px solid #e2e9eb; border-radius: 8px; cursor: pointer; font: inherit; font-size: 9px; font-weight: 900; }
.prompt-style-reset:hover { color: var(--ink); border-color: rgba(30,158,170,.34); background: #f7fbfb; }
.prompt-style-panel summary { height: 24px; display: flex; align-items: center; justify-content: center; color: var(--prompt-accent-color, #1e9eaa); cursor: pointer; list-style: none; }
.prompt-style-panel summary::-webkit-details-marker { display: none; }
.prompt-style-panel summary svg { width: 13px; height: 13px; }
.prompt-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; border-top: 0; }
.prompt-style-color, .prompt-style-number { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.prompt-style-color input { width: 28px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: transparent; }
.prompt-style-number input { width: 42px; height: 22px; padding: 0 4px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 9px; }
.system-node-editor { gap: 9px; }
.canvas-node.loop-node { width: 288px; background: #ffffff; }
.canvas-node.loop-node .node-shell-body { overflow: hidden; background: #ffffff; }
.loop-node-header { --prompt-accent-color: #b7791f; }
.loop-node-title { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.loop-node-header .node-delete-button { margin-left: auto; }
.loop-run-status { min-width: 0; max-width: 92px; height: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; overflow: hidden; color: #71868b; background: #f7fafb; border: 1px solid #dbe6e8; border-radius: 6px; font-size: 8px; font-weight: 850; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.loop-run-status svg { width: 11px; height: 11px; flex: 0 0 auto; }
.loop-run-status.running { color: #8a5a0a; background: #fff8eb; border-color: #efd9a9; }
.loop-run-status.running svg { animation: node-run-spin .85s linear infinite; }
.loop-run-status.done { color: #2f8b63; background: #effaf4; border-color: #c9ead8; }
.loop-run-status.failed { color: #a6424e; background: #fff3f4; border-color: rgba(189,76,90,.28); }
.loop-run-status.cancelled { color: #71868b; background: #f3f5f7; border-color: #d4dde1; }
.loop-node-pills span { flex: 1 1 0; justify-content: center; }
.loop-node-editor { gap: 7px; padding-top: 8px; }
.loop-top-row { display: grid; grid-template-columns: minmax(92px, .72fr) minmax(0, 1fr); align-items: center; gap: 6px; }
.loop-total-panel { height: 30px; min-width: 0; display: grid; grid-template-columns: auto minmax(24px, auto); align-items: center; gap: 6px; padding: 0 8px; color: #536770; background: #f8fbfb; border: 1px solid #d6e3e7; border-radius: 8px; }
.loop-total-panel span { color: #596c74; font-size: 10px; font-weight: 700; white-space: nowrap; }
.loop-total-panel strong { min-width: 24px; height: 22px; display: grid; place-items: center; padding: 0 6px; color: #111827; background: #ffffff; border: 1px solid #dbe6e9; border-radius: 7px; font-size: 10px; font-weight: 500; }
.loop-total-panel small { display: none; }
.loop-mode-group { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 6px; }
.loop-mode-select { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 5px; color: #596c74; font-size: 10px; font-weight: 700; }
.loop-mode-select select { width: 100%; height: 30px; min-width: 0; padding: 0 7px; color: #0f172a; background: #ffffff; border: 1px solid #cbd9e0; border-radius: 7px; outline: none; font: inherit; font-size: 10px; font-weight: 500; }
.loop-mode-select select:focus { border-color: #b7791f; box-shadow: 0 0 0 2px rgba(183,121,31,.12); }
.loop-refresh-button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: #64777e; background: #ffffff; border: 1px solid #cbd9e0; border-radius: 7px; cursor: pointer; }
.loop-refresh-button:hover, .loop-refresh-button:focus-visible { color: #0f172a; border-color: #b7791f; outline: none; box-shadow: 0 0 0 2px rgba(183,121,31,.12); }
.loop-refresh-button svg { width: 14px; height: 14px; }
.loop-number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.loop-number-field { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; color: #596c74; font-size: 10px; font-weight: 700; }
.loop-number-field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loop-number-field input { width: 100%; height: 30px; min-width: 0; padding: 0 6px; color: #0f172a; background: #ffffff; border: 1px solid #cbd9e0; border-radius: 7px; outline: none; font: inherit; font-size: 10px; font-weight: 500; text-align: center; }
.loop-number-field input:focus { border-color: #b7791f; box-shadow: 0 0 0 2px rgba(183,121,31,.12); }
.loop-channel-row { display: grid; grid-template-columns: minmax(96px, .98fr) repeat(2, minmax(0, .9fr)); align-items: center; gap: 6px; }
.loop-control-panel { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px; background: #f8fbfb; border: 1px solid #d6e3e7; border-radius: 8px; }
.loop-count-field { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; color: #596c74; font-size: 10px; font-weight: 850; }
.loop-count-field input { width: 100%; height: 28px; padding: 0 8px; color: #0f172a; background: #ffffff; border: 1px solid #cbd9e0; border-radius: 8px; outline: none; font: inherit; font-size: 13px; font-weight: 900; text-align: center; }
.loop-mode-pill { height: 32px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #ffffff; background: #111827; border-radius: 999px; font-size: 11px; font-weight: 900; }
.loop-mode-pill svg { width: 13px; height: 13px; }
.loop-toggle-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.loop-channel-switch { min-width: 0; height: 30px; display: grid; grid-template-columns: 14px auto auto; align-items: center; justify-content: start; gap: 6px; padding: 0 8px; color: #536770; background: #f8fbfb; border: 1px solid #d6e3e7; border-radius: 9px; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; text-align: left; }
.loop-channel-switch svg { width: 14px; height: 14px; }
.loop-channel-switch span { min-width: 0; overflow: visible; text-overflow: clip; white-space: nowrap; }
.loop-channel-switch strong { min-width: 20px; height: 18px; display: grid; place-items: center; padding: 0 5px; color: inherit; background: rgba(255,255,255,.72); border-radius: 999px; font-size: 10px; font-weight: 500; }
.loop-channel-switch[data-loop-channel="image"].available { color: #235f68; background: #eef8f9; border-color: #b9dde2; }
.loop-channel-switch[data-loop-channel="prompt"].available { color: #74501a; background: #fff7e8; border-color: #ecd49f; }
.loop-channel-switch.open { box-shadow: inset 0 0 0 1px currentColor; }
.loop-channel-switch[data-loop-channel="image"].open { background: #e3f4f6; }
.loop-channel-switch[data-loop-channel="prompt"].open { background: #fff0cf; }
.loop-channel-switch.empty { color: #8b9aa0; background: #f7fafa; border-style: dashed; }
.loop-channel-switch:hover, .loop-channel-switch:focus-visible { outline: none; transform: translateY(-1px); }
.loop-node-warning { min-height: 28px; display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 6px; padding: 6px 8px; color: #8a5a0a; background: #fff8eb; border: 1px solid #efd9a9; border-radius: 7px; font-size: 9px; font-weight: 850; line-height: 1.35; }
.loop-node-warning.hidden { display: none; }
.loop-node-warning svg { width: 13px; height: 13px; }
.loop-node-warning span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loop-preview-stack { min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.loop-preview-panel { min-height: 0; overflow: hidden; background: #fbfdfd; border: 1px solid #dce7e8; border-radius: 9px; }
.loop-preview-head { height: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 6px; padding: 0 5px 0 9px; color: #587075; background: #f4f8f8; border-bottom: 1px solid #e2eaec; font-size: 9px; font-weight: 900; }
.loop-preview-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loop-preview-head strong { min-width: 20px; height: 18px; display: grid; place-items: center; padding: 0 5px; color: #496269; background: #ffffff; border-radius: 999px; font-size: 8px; }
.loop-preview-collapse { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; color: #6c7f84; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.loop-preview-collapse:hover { color: var(--ink); background: #eaf2f2; }
.loop-preview-collapse svg { width: 13px; height: 13px; }
.loop-image-preview-grid { max-height: 108px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; padding: 8px; }
.loop-image-preview-thumb { position: relative; min-width: 0; aspect-ratio: 1; margin: 0; overflow: hidden; background: #eaf1f2; border: 1px solid #d9e5e7; border-radius: 7px; }
.loop-image-preview-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.loop-image-preview-thumb figcaption { position: absolute; left: 4px; top: 4px; min-width: 16px; height: 16px; display: grid; place-items: center; color: #ffffff; background: rgba(31,52,59,.72); border-radius: 999px; font-size: 8px; font-weight: 900; }
.loop-prompt-preview-list { max-height: 122px; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.loop-prompt-preview-row { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; margin: 0; padding: 7px; color: #344950; background: #ffffff; border: 1px solid #e1eaec; border-radius: 7px; }
.loop-prompt-preview-row span { color: #8a6a2b; font-size: 9px; font-weight: 900; line-height: 1.45; }
.loop-prompt-preview-row p { min-width: 0; max-height: 42px; margin: 0; overflow: hidden; font-size: 10px; font-weight: 650; line-height: 1.45; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.loop-preview-empty { padding: 10px; color: #72848a; background: #f8fbfb; font-size: 10px; font-weight: 750; line-height: 1.45; }
.loop-preview-more { min-height: 42px; display: grid; place-items: center; color: #60777d; background: #f3f8f8; border: 1px dashed #d6e3e7; border-radius: 7px; font-size: 10px; font-weight: 900; }
.loop-preview-more.text { min-height: 28px; }
.loop-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.loop-image-hint { padding: 9px 10px; color: #596c74; background: #f8fbfb; border: 1px dashed #cbd9e0; border-radius: 8px; font-size: 10px; font-weight: 750; line-height: 1.45; }
.loop-preview p { max-height: 70px; }
.system-node-input-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.system-node-input-summary span { min-height: 25px; display: inline-flex; align-items: center; padding: 0 8px; color: #567076; background: #f3f8f8; border: 1px solid var(--soft-line); border-radius: 6px; font-size: 8px; font-weight: 850; }
.node-edit-section-title { padding-top: 3px; color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.node-editor { display: flex; flex-direction: column; gap: 8px; padding: 0 13px 13px; border-top: 1px solid var(--soft-line); }
.canvas-node.loop-node .loop-node-editor { gap: 7px; padding: 8px 10px 10px; border-top: 0; }
.canvas-node.prompt-node .prompt-node-editor { padding: 14px 10px 10px; border-top: 0; overflow: hidden; }
.canvas-node.llm-node { width: 420px; display: flex; flex-direction: column; }
.canvas-node:is(.comfy-node, .generator-node, .msgen-node, .video-node, .llm-node, .rh-node) .node-shell-body { overflow: hidden; }
.canvas-node.llm-node .node-shell-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.canvas-node.llm-node .llm-node-editor { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.canvas-node.replacer-node { width: 288px; display: flex; flex-direction: column; }
.canvas-node.replacer-node .node-shell-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.canvas-node.replacer-node .replacer-node-topbar { flex: 0 0 38px; min-height: 38px; height: 38px; box-sizing: border-box; padding: 7px 10px 3px 14px; }
.replacer-node-topbar .comfy-topbar-title { min-width: 0; flex: 1 1 auto; }
.replacer-node-topbar .comfy-topbar-title .node-icon { width: 28px; height: 28px; border-radius: 7px; }
.replacer-node-topbar .comfy-topbar-title .node-icon svg { width: 15px; height: 15px; }
.replacer-node-topbar .comfy-topbar-title strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.replacer-node-topbar .comfy-header-actions { min-width: 0; gap: 4px; }
.replacer-mode-select { width: 82px; height: 24px; min-width: 0; flex: 0 1 82px; padding: 0 5px; color: #506169; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; outline: none; font: inherit; font-size: 9px; font-weight: 750; }
.replacer-mode-select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.replacer-node-topbar .node-run-icon,
.replacer-node-topbar .node-delete-button { width: 24px; height: 24px; border-radius: 6px; }
.replacer-node-topbar .node-run-icon svg,
.replacer-node-topbar .node-delete-button svg { width: 12px; height: 12px; }
.replacer-node-editor { flex: 1 1 auto; min-height: 0; gap: 8px; padding: 10px; overflow-x: hidden; overflow-y: auto; border-top: 0; background: #ffffff; }
.replacer-node-editor .replacer-text-field > span,
.replacer-node-editor .node-edit-field > span { font-size: 9px; }
.replacer-node-editor .replacer-source-textarea,
.replacer-node-editor .replacer-rules-textarea { flex: 0 0 auto; height: 68px; min-height: 68px; resize: vertical; }
.replacer-node-editor .replacer-source-textarea[readonly] { color: #506169; background: #f6fbfb; cursor: default; }
.replacer-output-panel { flex: 0 0 auto; }
.canvas-node.replacer-node .replacer-output-textarea { resize: vertical; }
.comfy-node-editor { gap: 0; padding: 0; border-top: 0; }
.comfy-collapsed-editor { flex: 0 0 auto !important; overflow: hidden; }
.comfy-collapsed-editor .comfy-prompt-section { padding-bottom: 0; }
.comfy-collapsed-editor .comfy-prompt-section textarea { resize: none; }
.comfy-node-scroll-region { min-height: 0; display: flex; flex-direction: column; }
.canvas-node:is(.comfy-node, .generator-node, .msgen-node, .video-node, .rh-node) .comfy-node-editor { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.canvas-node:is(.comfy-node, .generator-node, .msgen-node, .video-node, .rh-node) .comfy-node-scroll-region { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; }
.canvas-node:is(.comfy-node, .generator-node, .msgen-node, .video-node, .rh-node) .comfy-node-scroll-region::-webkit-scrollbar { width: 8px; height: 8px; }
.canvas-node:is(.comfy-node, .generator-node, .msgen-node, .video-node, .rh-node) .comfy-node-scroll-region::-webkit-scrollbar-thumb { background: rgba(98,132,138,.28); border-radius: 999px; }
.comfy-editor-section { padding: 10px 18px; border-top: 1px solid var(--soft-line); }
.comfy-editor-section:first-child { border-top: 0; }
.comfy-node-scroll-region > .comfy-editor-section:first-child { border-top: 1px solid var(--soft-line); }
.comfy-section-title { min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--muted); }
.comfy-section-title strong { color: var(--ink); font-size: 13px; font-weight: 800; }
.comfy-section-title span { min-width: 0; overflow: hidden; font-size: var(--comfy-muted-font-size); font-weight: var(--comfy-muted-font-weight); text-overflow: ellipsis; white-space: nowrap; }
.comfy-node-editor .node-edit-field > span, .comfy-node-editor .node-edit-check span, .comfy-node-editor .node-output-preview > span { font-family: inherit; font-size: var(--comfy-muted-font-size); font-weight: var(--comfy-muted-font-weight); letter-spacing: 0; text-transform: none; }
.comfy-node-editor .node-edit-field input,
.comfy-node-editor .node-edit-field select,
.comfy-node-editor .node-edit-field textarea { font-size: 10px; font-weight: 400; }
.comfy-prompt-section { padding-top: 8px; padding-bottom: 8px; }
.comfy-prompt-section textarea { height: var(--comfy-prompt-height, 54px); min-height: 54px; overflow: auto; resize: vertical; }
.comfy-prompt-grid { display: grid; grid-template-columns: repeat(var(--comfy-prompt-columns, 1), minmax(0, 1fr)); align-items: start; gap: 8px; }
.comfy-inline-hint-field { position: relative; }
.comfy-prompt-section .comfy-inline-hint-field > span { position: absolute; left: 9px; top: 8px; z-index: 2; max-width: calc(100% - 18px); padding: 0 5px; color: #71838a; background: rgba(251,253,253,.92); border-radius: 4px; font-family: inherit; font-size: var(--comfy-muted-font-size); font-weight: var(--comfy-muted-font-weight); line-height: 18px; pointer-events: none; transition: opacity .12s ease; }
.comfy-prompt-section .comfy-inline-hint-field textarea { padding-top: 24px; }
.comfy-prompt-section .comfy-inline-hint-field.has-value > span { display: none; }
.comfy-prompt-section .comfy-inline-hint-field.has-value textarea { padding-top: 6px; }
.comfy-prompt-section .comfy-inline-hint-field:hover > span,
.comfy-prompt-section .comfy-inline-hint-field:focus-within > span { opacity: 0; }
.upstream-prompt-preview textarea[readonly] { color: #40565d; background: #f6fbfb; border-color: rgba(30,158,170,.28); cursor: default; resize: none; }
.upstream-prompt-preview textarea[readonly]:focus { border-color: rgba(30,158,170,.28); box-shadow: none; }
.comfy-input-preview-section { padding-top: 5px; padding-bottom: 5px; background: #fbfdfd; }
.comfy-input-preview-list { position: relative; min-height: 47px; display: flex; align-items: flex-start; gap: 5px; padding: 6px; overflow-x: auto; overflow-y: hidden; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 8px; }
.comfy-input-preview-hint { position: absolute; left: 6px; top: 5px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 12px); padding: 0 4px; color: #71838a; background: rgba(247,250,249,.92); border-radius: 4px; font-family: inherit; font-size: var(--comfy-muted-font-size); font-weight: var(--comfy-muted-font-weight); line-height: 15px; pointer-events: none; transition: opacity .12s ease; }
.comfy-input-preview-hint strong { min-width: 15px; height: 15px; display: inline-grid; place-items: center; color: var(--cyan); background: #e8f3f4; border-radius: 999px; font-size: 8px; font-weight: 900; }
.comfy-input-preview-list:hover .comfy-input-preview-hint { opacity: 0; }
.comfy-input-thumb { position: relative; width: 46px; height: 46px; flex: 0 0 46px; display: grid; grid-template-rows: minmax(0, 1fr) 11px; overflow: hidden; background: #f6fafb; border: 1px solid var(--soft-line); border-radius: 8px; }
.comfy-input-thumb img { width: 100%; height: 100%; min-height: 0; display: block; object-fit: cover; }
.comfy-input-thumb b { position: absolute; left: 3px; top: 3px; z-index: 2; min-width: 13px; height: 13px; display: inline-grid; place-items: center; color: #ffffff; background: #111827; border-radius: 999px; font-size: 7px; font-weight: 900; box-shadow: 0 5px 14px rgba(15,23,42,.22); }
.comfy-input-thumb small { min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0 2px; color: #567076; background: rgba(255,255,255,.92); font-size: 7px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comfy-input-thumb.empty { place-items: center; color: var(--muted); background: #f3f7f7; border-style: dashed; }
.comfy-input-thumb.empty svg { width: 18px; height: 18px; color: var(--cyan); }
.comfy-audio-input-section { padding-top: 5px; padding-bottom: 5px; background: #fbfdfd; }
.comfy-audio-input-row { min-width: 0; min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 8px; }
.comfy-audio-input-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: 0 0 28px; color: var(--cyan); background: #e8f3f4; border-radius: 6px; }
.comfy-audio-input-icon svg { width: 15px; height: 15px; }
.comfy-audio-input-copy { min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; }
.comfy-audio-input-copy strong { color: var(--ink); font-size: 9px; font-weight: 850; }
.comfy-audio-input-copy small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.comfy-audio-input-row audio { width: min(180px, 42%); height: 28px; flex: 0 1 180px; }
.comfy-reference-section { padding-top: 8px; padding-bottom: 8px; }
.comfy-reference-list { display: flex; align-items: center; gap: 7px; overflow-x: auto; }
.comfy-reference-thumb { width: 52px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: #101923; border: 1px solid var(--soft-line); border-radius: 7px; }
.comfy-reference-thumb img, .comfy-reference-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.comfy-reference-thumb svg { width: 16px; height: 16px; color: #d6e7ee; }
.comfy-core-section { padding-top: 8px; padding-bottom: 8px; }
.comfy-core-grid { align-items: end; }
.comfy-detail-section { padding-top: 8px; padding-bottom: 8px; }
.node-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.node-edit-field { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.node-edit-field > span, .node-edit-check span, .node-output-preview > span { color: var(--muted); font-size: 8px; font-weight: 700; }
.node-edit-field input, .node-edit-field select, .node-edit-field textarea { width: 100%; min-width: 0; padding: 6px 7px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; font-size: 9px; }
.node-edit-field input[type="range"] { height: 26px; padding: 0; accent-color: var(--cyan); background: transparent; border: 0; }
.node-edit-field textarea { min-height: 54px; resize: vertical; line-height: 1.45; }
.node-edit-field input:focus, .node-edit-field select:focus, .node-edit-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.canvas-node:is(.ideogram-node, .sphereLight-node, .berniniBridge-node, .panoramaStickers-node, .ty360Roundtrip-node, .ty360Preview-node, .qwenMultiangle-node) { display: flex; flex-direction: column; overflow: visible; background: #fff; }
.canvas-node:is(.ideogram-node, .sphereLight-node, .berniniBridge-node, .panoramaStickers-node, .ty360Roundtrip-node, .ty360Preview-node, .qwenMultiangle-node) {
  --text: var(--ink);
  --strong: var(--ink);
  --card-solid: #ffffff;
  --panel: #f7faf9;
  --soft: #f3f8f8;
  --line: var(--soft-line);
  --line-2: #d8e3e4;
  --accent: var(--cyan);
  overflow: visible;
}
.canvas-node:is(.sphereLight-node, .berniniBridge-node, .panoramaStickers-node, .ty360Roundtrip-node, .ty360Preview-node, .qwenMultiangle-node) .node-shell-body { flex: 1 1 auto; height: auto; overflow: hidden; padding: 10px; background: #ffffff; }
.canvas-node:is(.ideogram-node, .sphereLight-node, .berniniBridge-node, .panoramaStickers-node, .ty360Roundtrip-node, .ty360Preview-node, .qwenMultiangle-node) [data-reference-node-root] { height: 100%; min-height: 0; }
.generation-tool-topbar { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px 6px 10px; border-bottom: 1px solid var(--soft-line); background: #fbfdfd; }
.generation-tool-topbar > div { min-width: 0; display: flex; align-items: center; gap: 7px; }
.generation-tool-topbar .node-icon { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 5px; }
.generation-tool-topbar strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.generation-tool-topbar em { flex: 0 0 auto; padding: 2px 5px; color: #9a6119; background: #fff5df; border: 1px solid rgba(186,123,36,.26); border-radius: 4px; font-size: 8px; font-style: normal; font-weight: 800; }
.canvas-node:is(.berniniBridge-node, .panoramaStickers-node, .ty360Roundtrip-node, .ty360Preview-node) :is(.bernini-bridge-head, .ty360pano-toolbar) { display: none !important; }
.canvas-node:is(.ideogram-node, .sphereLight-node, .berniniBridge-node, .panoramaStickers-node, .ty360Roundtrip-node, .ty360Preview-node, .qwenMultiangle-node) > .node-resize-handle { right: -9px; bottom: -9px; width: 22px; height: 22px; border-radius: 999px; }
.generation-tool-editor { flex: 1 1 auto; min-height: 0; gap: 8px; padding: 9px; overflow: auto; border-top: 0; background: #fff; }
.generation-tool-section { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 8px; border: 1px solid var(--soft-line); border-radius: 6px; background: #fbfdfd; }
.generation-tool-section-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.generation-tool-section-head strong { color: var(--ink); font-size: 9px; font-weight: 800; }
.generation-tool-section-head span { color: var(--cyan); font-variant-numeric: tabular-nums; font-weight: 800; }
.generation-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.generation-tool-grid .node-edit-field { gap: 4px; }
.generation-tool-field { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.generation-tool-field > span, .generation-tool-control > span { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: var(--muted); font-size: 8px; font-weight: 700; }
.generation-tool-field input, .generation-tool-field select { width: 100%; min-width: 0; height: 27px; padding: 5px 7px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; font-size: 9px; font-weight: 400; }
.generation-tool-field input[type="color"] { padding: 2px; }
.generation-tool-control { min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
.generation-tool-control > span { min-width: 0; }
.generation-tool-control b { color: var(--ink); font-size: 9px; font-weight: 400; font-variant-numeric: tabular-nums; }
.generation-tool-control input { width: 100%; min-width: 0; accent-color: var(--cyan); }
.generation-tool-controls { gap: 6px; }
.generation-tool-empty { min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #789095; border: 1px dashed #cbdadd; border-radius: 5px; background: #fff; font-size: 9px; }
.generation-tool-empty svg { width: 17px; height: 17px; color: #8aa3a8; }
.generation-tool-reference-strip, .bernini-tool-strip { min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.generation-tool-reference-strip figure, .bernini-tool-strip figure { position: relative; width: 58px; height: 58px; flex: 0 0 58px; margin: 0; overflow: hidden; background: #edf3f3; border: 1px solid var(--soft-line); border-radius: 5px; }
.generation-tool-reference-strip figure.empty, .bernini-tool-strip figure.empty { display: grid; place-items: center; color: var(--muted); border-style: dashed; }
.generation-tool-reference-strip figure.empty svg, .bernini-tool-strip figure.empty svg { width: 20px; height: 20px; color: var(--cyan); }
.generation-tool-reference-strip img, .bernini-tool-strip img { width: 100%; height: 100%; display: block; object-fit: cover; }
.generation-tool-reference-strip figcaption, .bernini-tool-strip figcaption { position: absolute; left: 3px; bottom: 3px; min-width: 14px; height: 14px; display: grid; place-items: center; padding: 0 3px; color: #fff; background: rgba(20,34,41,.72); border-radius: 3px; font-size: 8px; font-weight: 800; }
.bernini-tool-strip figure { width: 74px; height: 74px; flex-basis: 74px; }
.bernini-tool-actions { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; }
.bernini-tool-actions button { width: 16px; height: 16px; display: grid; place-items: center; padding: 0; color: #f9ffff; background: rgba(23,40,45,.72); border: 0; border-radius: 3px; cursor: pointer; }
.bernini-tool-actions button:hover { background: var(--cyan); }
.bernini-tool-actions svg { width: 9px; height: 9px; }
.generation-tool-video-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0; border: 0; background: transparent; }
.generation-tool-video-slots > div { min-width: 0; min-height: 43px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 7px; border: 1px dashed #c8d7d9; border-radius: 5px; background: #f9fcfc; }
.generation-tool-video-slots span { color: var(--ink); font-size: 9px; font-weight: 800; }
.generation-tool-video-slots small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sphere-light-topbar { min-height: 38px; padding-left: 14px; background: #fff; }
.sphere-light-topbar > div { gap: 0; }
.sphere-light-topbar strong { color: #536983; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.generation-tool-canvas-preview { position: relative; min-height: 152px; display: grid; place-items: center; overflow: hidden; color: #7d969b; background: #eaf1f1; border: 1px solid var(--soft-line); border-radius: 6px; font-size: 9px; }
.generation-tool-canvas-preview img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.generation-tool-canvas-preview::after { content: ""; position: absolute; inset: 16% 22%; border: 1px solid rgba(255,255,255,.92); box-shadow: 0 0 0 999px rgba(10,29,33,.18); pointer-events: none; }
.generation-tool-canvas-preview span { z-index: 1; text-align: center; }
.generation-tool-development { min-height: 160px; align-items: center; justify-content: center; text-align: center; background: #fbfdfd; }
.generation-tool-development svg { width: 28px; height: 28px; color: #c1822c; }
.generation-tool-development strong { color: var(--ink); font-size: 12px; }
.generation-tool-development span { max-width: 240px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.comfy-param-grid { margin-top: 0; padding-top: 0; border-top: 0; }
.comfy-first-row-grid { margin-bottom: 7px; align-items: end; }
.api-first-row-grid { grid-template-columns: repeat(var(--api-control-columns, 2), minmax(0, 1fr)); gap: 8px; }
.api-first-row-grid .comfy-seed-input-wrap { grid-template-columns: minmax(0, 1fr) 22px; }
.api-first-row-grid .comfy-seed-input-wrap button { width: 22px; min-width: 22px; height: 26px; }
.api-first-row-grid .comfy-seed-input-wrap button svg { width: 12px; height: 12px; }
.comfy-first-row-grid .comfy-zimage-list { margin-top: 0; }
.comfy-lora-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--soft-line); }
.comfy-lora-row { display: flex; flex-direction: column; gap: 6px; padding: 7px; border: 1px solid var(--soft-line); border-radius: 6px; background: #fbfdfd; }
.comfy-lora-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 8px; font-weight: 700; }
.comfy-lora-title strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 9px; }
.node-edit-check { min-height: 29px; display: flex; align-items: flex-end; gap: 5px; padding-bottom: 6px; }
.node-edit-check input { width: 13px; height: 13px; margin: 0; accent-color: var(--cyan); }
.comfy-seed-row { min-width: 0; display: flex; flex-direction: column; gap: 5px; align-self: end; }
.comfy-seed-lock { min-height: 18px; align-items: center; padding-bottom: 0; }
.comfy-seed-input-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 5px; }
.comfy-seed-input-wrap input { width: 100%; min-width: 0; padding: 6px 7px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; font-size: 10px; font-weight: 400; }
.comfy-seed-input-wrap input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.comfy-seed-input-wrap button,
.comfy-zimage-row button { width: 24px; min-width: 24px; height: 24px; display: grid; place-items: center; align-self: end; color: #64748b; background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.comfy-lora-actions button { width: 30px; min-width: 30px; display: grid; place-items: center; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.comfy-lora-row > button { width: 26px; min-width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.comfy-seed-input-wrap button svg,
.comfy-zimage-row button svg { width: 10px; height: 10px; }
.comfy-lora-actions button svg { width: 13px; height: 13px; }
.comfy-lora-row > button svg { width: 12px; height: 12px; }
.comfy-zimage-list { display: flex; flex-direction: column; gap: 7px; margin-top: 7px; }
.comfy-zimage-row { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 7px; align-items: end; }
.comfy-zimage-row button.active { background: #fbfdfd; border-color: var(--line); color: #64748b; }
.comfy-lora-panel { margin-top: 8px; border: 1px solid var(--soft-line); border-radius: 6px; background: #fbfdfd; overflow: hidden; }
.comfy-lora-head { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 5px 7px; }
.comfy-lora-head > button { min-width: 0; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0; color: var(--muted); background: transparent; border: 0; cursor: pointer; font-size: var(--comfy-muted-font-size); font-weight: var(--comfy-muted-font-weight); }
.comfy-lora-head strong { min-width: 20px; min-height: 20px; display: inline-grid; place-items: center; color: var(--cyan); background: #e8f3f4; border-radius: 999px; font-size: 10px; }
.comfy-lora-switch { width: 8px; height: 8px; border-radius: 999px; background: #b9c7cb; }
.comfy-lora-panel.open .comfy-lora-switch { background: var(--cyan); }
.comfy-lora-head .comfy-lora-folder-select { flex: 0 1 148px; width: 148px; max-width: 36%; height: 24px; padding: 0 22px 0 7px; background-position: right 7px center; background-size: 10px 10px; font-size: 10px; font-weight: 400; }
.comfy-lora-actions { display: flex; gap: 5px; margin-left: auto; }
.comfy-lora-actions button.active { color: var(--cyan); background: #e8f3f4; border-color: rgba(30,158,170,.28); }
.comfy-lora-settings-panel { display: flex; flex-direction: column; gap: 5px; padding: 0 7px 6px; border-top: 1px dashed var(--soft-line); }
.comfy-lora-settings-row { min-height: 32px; display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 66px); gap: 5px; align-items: center; padding: 5px 6px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.comfy-lora-settings-row > span { min-width: 0; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.comfy-lora-settings-row label { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 400; }
.comfy-lora-settings-row input { width: 100%; min-width: 0; height: 24px; padding: 0 5px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; font-size: 10px; font-weight: 400; }
.comfy-lora-settings-row input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.comfy-lora-settings-empty { padding: 8px; color: var(--muted); background: #ffffff; border: 1px dashed var(--soft-line); border-radius: 6px; font-size: 10px; }
.comfy-lora-body { display: flex; flex-direction: column; gap: 5px; padding: 0 7px 6px; }
.comfy-lora-row { min-height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(118px, .62fr) 26px; gap: 6px; align-items: center; padding: 4px 5px 4px 8px; border: 1px solid var(--soft-line); border-radius: 6px; background: #fff; }
.comfy-lora-row.off { opacity: .55; }
.comfy-lora-name { min-width: 0; height: 26px; display: flex; align-items: center; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.comfy-lora-select { width: 100%; min-width: 0; padding: 6px 7px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; font-weight: 400; }
.comfy-lora-body .comfy-lora-select { height: 26px; padding: 0 22px 0 0; background-color: transparent; border-color: transparent; background-position: right 6px center; background-size: 10px 10px; }
.comfy-lora-body .comfy-lora-select:focus { background-color: #fbfdfd; border-color: var(--line); box-shadow: 0 0 0 2px rgba(30,158,170,.08); outline: none; }
.api-lora-row { grid-template-columns: minmax(0, 1fr) minmax(118px, .62fr); padding-right: 8px; }
.comfy-lora-strength { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 5px; align-items: center; color: var(--muted); font-size: 10px; }
.comfy-lora-strength input { width: 100%; min-width: 0; accent-color: var(--cyan); }
.comfy-lora-strength span { text-align: right; font-variant-numeric: tabular-nums; }
.comfy-lora-empty { padding: 8px; color: var(--muted); background: #f3f7f7; border-radius: 5px; font-size: 10px; }
.node-output-preview { min-width: 0; padding: 7px; background: #f3f7f7; border-radius: 5px; }
.node-output-preview p { max-height: 56px; overflow: auto; margin: 4px 0 0; color: #506169; font-size: 9px; line-height: 1.45; white-space: pre-wrap; }
.llm-node-topbar { padding-right: 10px; }
.llm-node-topbar .comfy-topbar-title { flex: 1 1 auto; }
.llm-node-title-input { font-size: var(--prompt-title-font-size, 12px); }
.llm-generation-header { min-height: 42px; gap: 6px; padding: 4px 18px 9px; }
.llm-generation-header .llm-node-selectors { min-width: 0; flex: 1 1 auto; grid-template-columns: 86px minmax(0, 1fr); gap: 6px; }
.llm-generation-header .generation-category-select,
.llm-generation-header .generation-workflow-select { width: 100%; min-width: 0; }
.llm-generation-header .generation-category-select { width: 100%; min-width: 0; max-width: none; }
.llm-generation-header .generation-workflow-select { min-width: 0; }
.llm-system-preset-button { flex: 0 0 24px; }
.llm-node-editor { flex: 1 1 auto; min-height: 0; gap: 8px; padding: 10px 18px; overflow: hidden; border-top: 0; background: #ffffff; }
.node-run-feedback { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 8px; color: #365f55; background: #edf8f2; border: 1px solid #cce8da; border-radius: 6px; }
.node-run-feedback > svg { width: 14px; height: 14px; }
.node-run-feedback > div { min-width: 0; }
.node-run-feedback strong, .node-run-feedback span { display: block; overflow-wrap: anywhere; }
.node-run-feedback strong { font-size: 9px; line-height: 1.3; }
.node-run-feedback span { margin-top: 2px; color: #5a746d; font-size: 8px; line-height: 1.35; }
.node-run-feedback.running > svg { animation: node-run-spin .85s linear infinite; }
.node-run-feedback.queued { color: #86652f; background: #fff8eb; border-color: #efd9a9; }
.node-run-feedback.queued span { color: #927a50; }
.node-run-feedback.failed { color: #a13c3c; background: #fff4f4; border-color: #f1cccc; }
.node-run-feedback.failed span { color: #8b5252; }
.node-run-feedback.done { color: #28704e; background: #f0f9f3; border-color: #cce8d5; }
.node-run-feedback.blocked { color: #9a3f3f; background: #fff1f1; border-color: #efc2c2; }
.node-run-feedback.blocked span { color: #8b5252; }
.media-preview-lineage-notice { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; padding: 8px 9px; color: #7d5f2a; background: #fff9ec; border: 1px solid #f0ddb1; border-radius: 7px; font-size: 10px; line-height: 1.4; }
.media-preview-lineage-notice svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.llm-edit-field > span { font-size: 9px; }
.llm-edit-field > .llm-system-prompt-label { width: 100%; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 700; }
.llm-system-prompt-label-text { min-width: 0; }
.llm-system-preset-preview { min-width: 0; height: 24px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; color: #89979c; background: #f5f7f7; border: 1px solid #e5ecec; border-radius: 5px; font-size: 8px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; user-select: none; }
.llm-textarea,
.llm-output-textarea { width: 100%; min-width: 0; padding: 7px 8px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: 10px; line-height: 1.45; resize: vertical; }
.llm-textarea:focus,
.llm-output-textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.llm-system-textarea,
.llm-user-textarea { min-height: 68px; }
.llm-output-panel { min-width: 0; flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 7px; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 7px; }
.llm-output-panel.fixed { background: #fffdf5; border-color: rgba(170,116,32,.28); }
.llm-output-head { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.llm-output-actions { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.llm-collapsed-section { min-width: 0; min-height: 30px; display: flex; align-items: center; gap: 7px; padding: 4px 7px 4px 9px; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 7px; }
.llm-collapsed-section strong { flex: 0 0 auto; color: var(--muted); font-size: 9px; font-weight: 850; white-space: nowrap; }
.llm-collapsed-line { min-width: 24px; height: 1px; flex: 1 1 auto; background: linear-gradient(90deg, rgba(98,132,138,.32), rgba(98,132,138,.12)); }
.llm-section-expand { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; padding: 0; color: #5f7378; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 5px; cursor: pointer; }
.llm-section-expand:hover { color: var(--cyan); border-color: rgba(30,158,170,.32); background: #f2fbfb; }
.llm-section-expand svg { width: 12px; height: 12px; }
.llm-collapsed-copy { flex: 0 0 24px; }
.llm-collapsed-lock.active { color: #855c18; background: #fff8e8; border-color: rgba(170,116,32,.34); }
.llm-fixed-toggle,
.llm-output-copy { height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; color: #506169; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 5px; cursor: pointer; font: inherit; font-size: 9px; font-weight: 850; white-space: nowrap; }
.llm-output-copy { width: 24px; padding: 0; flex: 0 0 24px; }
.llm-fixed-toggle:hover,
.llm-output-copy:hover { color: var(--cyan); border-color: rgba(30,158,170,.32); background: #f2fbfb; }
.llm-fixed-toggle.active { color: #855c18; background: #fff8e8; border-color: rgba(170,116,32,.34); }
.llm-fixed-toggle svg,
.llm-output-copy svg { width: 12px; height: 12px; flex: 0 0 auto; }
.llm-output-textarea { flex: 0 0 auto; height: 68px; min-height: 68px; background: #ffffff; white-space: pre-wrap; }
.llm-output-textarea[readonly] { color: #506169; cursor: default; }
.prompt-node-editor-llm-downstream .prompt-node-textarea { min-height: 150px; }

.canvas-node:is(.comfy-node, .generator-node, .msgen-node, .video-node, .llm-node, .rh-node),
.workflow-runtime-node {
  --compact-label-width: 58px;
  --compact-field-gap: 4px;
  --compact-row-gap: 10px;
}
.compact-fixed-row { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--compact-row-gap); align-items: center; }
.compact-fixed-placeholder { min-width: 0; min-height: 30px; }
.compact-fixed-control { min-width: 0; height: 30px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 5px; align-items: center; }
.compact-fixed-control > input,
.compact-fixed-control > select,
.compact-fixed-control > textarea,
.compact-param-field > input,
.compact-param-field > select,
.compact-param-field > textarea { min-width: 0; width: 100%; height: 30px; min-height: 30px; padding: 0 8px; color: #33484e; background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; font-size: 10px; line-height: 28px; }
.compact-fixed-control > textarea,
.compact-param-field > textarea { overflow: hidden; resize: none; white-space: nowrap; }
.compact-fixed-control > input:focus,
.compact-fixed-control > select:focus,
.compact-fixed-control > textarea:focus,
.compact-param-field > input:focus,
.compact-param-field > select:focus,
.compact-param-field > textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.compact-fixed-control.is-disabled,
.compact-param-field.is-disabled { opacity: .58; filter: grayscale(1); }
.compact-fixed-control :is(input, select, textarea):disabled,
.compact-param-field :is(input, select, textarea):disabled { color: #87979c; background: #eef3f3; border-color: #d7e1e2; cursor: not-allowed; box-shadow: none; }
.compact-param-field.is-disabled .compact-param-label { color: #9aa9ad; cursor: help; }
.compact-control-icon,
.compact-control-action { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: #657981; background: #f8fbfb; border: 1px solid var(--line); border-radius: 5px; }
button.compact-control-icon,
button.compact-control-action { cursor: pointer; }
.compact-control-icon svg,
.compact-control-action svg { width: 13px; height: 13px; }
.compact-control-icon.active { color: #fff; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.compact-control-icon.passive { color: var(--cyan); background: #e8f3f4; border-color: #cde5e6; }
.compact-control-action:hover { color: var(--cyan); background: #fff; border-color: #a9d4d6; }
.compact-seed-control > input:disabled { color: #87979c; background: #f2f6f6; }
.compact-resolution-no-action { grid-template-columns: 30px minmax(0, 1fr); }
.compact-api-resolution-control { grid-template-columns: 26px minmax(46px, 1fr) 52px; gap: 4px; }
.compact-api-resolution-control .compact-control-icon,
.compact-api-resolution-control .compact-control-action { width: 26px; height: 30px; }
.compact-api-resolution-control > select { padding-left: 5px; padding-right: 19px; background-position: right 5px center; background-size: 9px 9px; font-size: 9px; }
.compact-api-resolution-control .compact-ratio-select { padding-left: 4px; }
.comfy-zimage-list { min-width: 0; gap: 6px; margin-top: 0; }
.compact-param-grid { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.compact-param-row { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--compact-row-gap); align-items: center; }
.compact-param-row-full { grid-template-columns: minmax(0, 1fr); }
.compact-param-field { min-width: 0; height: 30px; display: grid; grid-template-columns: var(--compact-label-width) minmax(0, 1fr); gap: var(--compact-field-gap); align-items: center; }
.compact-param-field.compact-param-half { grid-template-columns: var(--compact-label-width) minmax(0, 1fr); justify-content: stretch; }
.compact-param-field.compact-param-full { grid-column: 1 / -1; }
.compact-param-label { position: relative; min-width: 0; width: 100%; height: 30px; overflow: hidden; padding: 0; color: var(--muted); background: transparent; border: 0; cursor: help; font: inherit; font-size: 9px; font-weight: 700; line-height: 30px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.compact-param-label:hover,
.compact-param-label:focus { color: var(--ink); }
.compact-param-label.expanded { z-index: 5; width: max-content; max-width: 240px; overflow: visible; padding-right: 7px; color: var(--ink); background: #fff; box-shadow: 5px 0 8px rgba(255,255,255,.96); }
.compact-range-control { min-width: 0; height: 30px; display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 7px; align-items: center; }
.compact-range-control input { min-width: 0; width: 100%; accent-color: var(--cyan); }
.compact-range-control output { width: 38px; overflow: hidden; color: #40565c; font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; }
.compact-toggle { position: relative; width: 34px; height: 19px; display: inline-block; justify-self: start; cursor: pointer; }
.compact-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.compact-toggle span { position: absolute; inset: 0; background: #cbd6d8; border: 1px solid #bcc9cb; border-radius: 999px; transition: background .15s ease, border-color .15s ease; }
.compact-toggle span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; background: #fff; border-radius: 999px; box-shadow: 0 1px 4px rgba(30,48,54,.2); transition: left .15s ease; }
.compact-toggle input:checked + span { background: var(--cyan); border-color: var(--cyan); }
.compact-toggle input:checked + span::after { left: 17px; }
.compact-toggle input:focus-visible + span { outline: 2px solid rgba(30,158,170,.38); outline-offset: 2px; }
.llm-collapsed-editor { flex: 0 0 auto; }
.llm-settings-panel { position: absolute; top: 6px; right: 116px; z-index: 24; width: 220px; max-width: calc(100vw - 32px); padding: 9px; background: #fff; border: 1px solid var(--soft-line); border-radius: 7px; box-shadow: 0 16px 38px rgba(31,52,59,.2); }
.llm-settings-head { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.llm-settings-head strong { color: var(--ink); font-size: 10px; font-weight: 850; }
.llm-settings-head button { width: 23px; height: 23px; display: grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.llm-settings-head button:hover { color: #a33c3c; background: #fff0f0; }
.llm-settings-head button svg { width: 12px; height: 12px; }
.llm-settings-form { display: flex; flex-direction: column; gap: 6px; }
.llm-settings-row { min-width: 0; height: 30px; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 7px; align-items: center; }
.llm-settings-row span { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.llm-settings-row input { width: 100%; min-width: 0; height: 28px; padding: 0 7px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; font-size: 9px; }
.llm-settings-row input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.llm-settings-reset { width: 100%; height: 27px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; color: #5f7378; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 5px; cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; }
.llm-settings-reset:hover { color: var(--cyan); border-color: rgba(30,158,170,.3); }
.llm-settings-reset svg { width: 12px; height: 12px; }
.media-node-body { padding: 10px; }
.media-node-preview { position: relative; min-height: 150px; display: grid; place-items: center; overflow: hidden; background: #f3f7f7; border: 1px solid var(--soft-line); border-radius: 6px; color: var(--muted); }
.media-node-preview.has-media { background: #e9eff0; }
.media-node-preview img, .media-node-preview video { display: block; width: 100%; height: 100%; min-height: 150px; object-fit: contain; }
.media-mask-overlay { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; min-height: 0; object-fit: contain; opacity: var(--mask-overlay-opacity, .62); pointer-events: none; mix-blend-mode: normal; }
.media-node-preview video { background: #101c22; }
.media-node-preview .image-placeholder { min-height: 150px; }
.media-card-node { background: transparent; border-color: transparent; border-radius: var(--canvas-node-radius, 22px); box-shadow: none; }
.media-card-node.has-media { --media-card-radius: var(--canvas-node-inner-radius, 16px); }
.media-card-node.empty-media-card-node { overflow: hidden; background: #ffffff; border: 1px solid #e5edf4; border-radius: var(--canvas-node-radius, 22px); box-shadow: none; }
.media-card-node.empty-media-card-node:is(.embedded-generator-open, :has(.media-embedded-generator-panel)) { overflow: visible; }
.canvas-node.media-card-node.selected { border-color: transparent; box-shadow: none; }
.canvas-node.media-card-node.generated-media-node.selected { outline: 2px solid rgba(30,158,170,.94); outline-offset: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.92), 0 18px 42px rgba(30,158,170,.18); }
.media-card-node > .node-header, .media-card-node .node-shell-body > .node-header { display: none; }
.media-card-node.output-node { overflow: hidden; background: #ffffff; border: 1px solid #1f2937; border-radius: 8px; box-shadow: 0 12px 28px rgba(15,23,42,.14); }
.media-card-node.output-node.selected { outline: 2px solid rgba(30,158,170,.84); outline-offset: 3px; border-color: #17212b; box-shadow: 0 16px 38px rgba(30,158,170,.14); }
.media-card-node.output-node .node-shell-body { overflow: hidden; background: #ffffff; border-radius: inherit; }
.media-card-node.output-node .node-shell-body > .output-node-header { min-height: 36px; display: flex; flex: 0 0 auto; gap: 8px; padding: 5px 7px 5px 9px; background: #ffffff; border-bottom: 1px solid #dbe6e8; border-radius: 7px 7px 0 0; }
.output-node-header .node-icon { width: 24px; height: 24px; border-radius: 6px; }
.output-node-header .node-icon svg { width: 13px; height: 13px; }
.output-node-header strong { font-size: 10px; font-weight: 900; }
.output-node-header small { font-size: 8px; }
.output-node-header .node-delete-button { width: 24px; height: 24px; border-radius: 6px; }
.output-node-header .node-delete-button svg { width: 12px; height: 12px; }
.media-card-node .node-shell-body { overflow: visible; background: transparent; border-radius: inherit; }
.media-card-node.empty-media-card-node .node-shell-body { height: 100%; overflow: hidden; background: #ffffff; border-radius: inherit; }
.media-card-node.empty-media-card-node:is(.embedded-generator-open, :has(.media-embedded-generator-panel)) .node-shell-body { overflow: visible; }
.media-card-node .media-node-body { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: visible; border-radius: inherit; content-visibility: visible; contain-intrinsic-size: none; }
.media-card-node.output-node .output-node-body { flex: 1 1 auto; overflow: hidden; border-radius: 0 0 7px 7px; }
.media-node-body-empty { background: #ffffff; }
.media-empty-card { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; border-radius: inherit; }
.media-empty-topbar { flex: 0 0 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 11px; color: #758294; background: #ffffff; cursor: grab; user-select: none; }
.media-empty-topbar:active { cursor: grabbing; }
.media-empty-topbar span { overflow: hidden; color: #7c8798; font-size: 10px; font-weight: 900; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.media-empty-close { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #b6c0cf; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.media-empty-close:hover { color: #6b7687; background: #f3f6fa; }
.media-empty-close svg { width: 13px; height: 13px; }
.media-empty-dropzone { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin: 0 8px 8px; color: #9aa8bd; background: #f8fafc; border: 1px dashed #d6e1ec; border-radius: 8px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.media-empty-dropzone:hover, .media-empty-dropzone.drag-over { color: #6685aa; background: #f4f8fc; border-color: #a9bfd7; }
.media-empty-dropzone svg { width: 28px; height: 28px; color: #94a6c0; }
.media-node-body-loading { width: 100%; height: 100%; min-height: 0; padding: 0; border-radius: 16px; background: #f8fafc; }
.media-pending-card { position: relative; width: 100%; height: 100%; min-height: 256px; display: grid; place-items: center; overflow: hidden; color: #64748b; background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 16px; animation: mediaPendingPulse 1.5s ease-in-out infinite; }
.media-pending-time { position: absolute; top: 8px; right: 10px; z-index: 2; color: #64748b; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.media-pending-delete { position: absolute; top: 7px; left: 8px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; color: #a96a72; background: rgba(255,255,255,.9); border: 1px solid rgba(169,56,72,.2); border-radius: 6px; cursor: pointer; }
.media-pending-delete:hover { color: #a93848; background: #fff; border-color: rgba(169,56,72,.45); }
.media-pending-delete svg { width: 14px; height: 14px; }
.media-pending-cancel { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; padding: 0 9px; color: #64748b; background: #fff; border: 1px solid #d8e0e9; border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 800; transition: color .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.media-pending-cancel:hover { color: #a93848; background: #fff; border-color: rgba(169,56,72,.42); }
.media-pending-cancel:focus-visible { color: #a93848; border-color: rgba(169,56,72,.58); box-shadow: 0 0 0 3px rgba(169,56,72,.12); outline: none; }
.media-pending-cancel:active { color: #8f2e3d; background: #fff7f8; border-color: rgba(169,56,72,.58); }
.media-pending-cancel svg { width: 13px; height: 13px; color: currentColor; }
.media-pending-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #64748b; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.media-pending-center svg { width: 24px; height: 24px; color: #bd4c5a; }
.media-pending-center .media-pending-cancel svg { width: 13px; height: 13px; color: currentColor; }
.media-pending-spinner { width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 999px; animation: mediaPendingSpin .8s linear infinite; }
.media-pending-card.failed { color: #9b3e49; background: #fff7f7; border-color: rgba(189,76,90,.42); animation: none; }
.media-pending-card.cancelled { color: #64748b; background: #f3f5f7; border-color: #cbd5e1; animation: none; }
.media-pending-card.cancelled .media-pending-center svg { color: #64748b; }
@keyframes mediaPendingPulse { 0%, 100% { border-color: #e2e8f0; } 50% { border-color: #94a3b8; } }
@keyframes mediaPendingSpin { to { transform: rotate(360deg); } }
.media-generation-badge { max-width: 58px; height: 20px; display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; color: #dff8fb; background: rgba(30,158,170,.18); border: 1px solid rgba(157,220,224,.2); border-radius: 5px; font-size: 8px; font-weight: 850; white-space: nowrap; }
.media-generation-badge.data { color: #f0f8d8; background: rgba(143,161,58,.18); border-color: rgba(210,224,117,.22); }
.media-generation-badge.tucked { color: #d7f7eb; background: rgba(74,149,118,.22); border-color: rgba(128,210,179,.28); }
.media-generation-badge svg { flex: 0 0 auto; width: 10px; height: 10px; }
.media-card-node .media-node-preview { flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; background: transparent; border-color: transparent; border-radius: var(--media-card-radius, var(--canvas-node-inner-radius, 16px)); box-shadow: none; cursor: grab; }
.media-card-node .media-node-preview.has-media { background: #e9eff0; }
.media-card-node .media-node-preview:active { cursor: grabbing; }
.media-card-node.output-node .media-node-preview { border-radius: 0; cursor: default; }
.media-card-node.output-node .media-node-preview.drag-over { outline: 2px solid rgba(30,158,170,.72); outline-offset: -4px; background: #f2fbfb; }
.media-card-node .media-node-preview img, .media-card-node .media-node-preview video { min-height: 0; border-radius: inherit; }
.media-card-node .media-node-preview .image-placeholder { min-height: 0; height: 100%; }
.media-card-node .media-node-preview.drag-over { outline: 2px solid rgba(30,158,170,.72); outline-offset: 3px; }
.media-node-body-missing { min-height: 0; flex: 1 1 auto; display: grid; place-items: center; padding: 10px; }
.media-missing-card { width: 100%; height: 100%; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8a6b26; background: #fffaf0; border: 1px dashed rgba(176,130,36,.45); border-radius: 8px; font-size: 11px; font-weight: 900; }
.media-missing-card svg { width: 24px; height: 24px; }
.media-video-shell { position: relative; width: 100%; height: 100%; min-height: 0; display: block; overflow: hidden; border-radius: inherit; background: #020817; cursor: default; }
.media-video-shell video { width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: inherit; background: #020817; }
.media-video-play-button { position: absolute; left: 50%; top: 50%; z-index: 7; width: 56px; height: 56px; display: grid; place-items: center; padding: 0; color: #17212b; background: rgba(255,255,255,.94); border: 1px solid rgba(226,232,240,.88); border-radius: 999px; box-shadow: 0 14px 34px rgba(15,23,42,.22); transform: translate(-50%, -50%); cursor: pointer; transition: opacity .16s ease, transform .16s ease; }
.media-video-play-button:hover { transform: translate(-50%, -50%) scale(1.04); }
.media-video-play-button svg { width: 26px; height: 26px; margin-left: 3px; }
.canvas-node.media-is-playing .media-video-play-button { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.92); }
.media-timeline-toolbar { position: absolute; right: 7px; top: 7px; z-index: 13; display: inline-flex; align-items: center; gap: 3px; opacity: .98; }
.media-video-toolbar { opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; }
.media-card-node:hover .media-video-toolbar, .media-card-node:focus-within .media-video-toolbar { opacity: .98; pointer-events: auto; transform: translateY(0); }
.media-timeline-tool-button { width: 32.5px; height: 32.5px; display: grid; place-items: center; padding: 0; color: #344252; background: rgba(255,255,255,.94); border: 1px solid rgba(226,232,240,.88); border-radius: 6.5px; box-shadow: 0 8px 18px rgba(15,23,42,.14); cursor: pointer; transition: transform .14s ease, background .14s ease, color .14s ease; }
.media-timeline-tool-button:hover { color: #102027; background: #ffffff; transform: translateY(-1px); }
.media-timeline-tool-button svg { width: 16.9px; height: 16.9px; }
.media-edit-toolbar { position: absolute; left: 50%; top: -51.5px; z-index: 12; display: inline-flex; align-items: center; gap: 3.9px; padding: 3.9px; background: rgba(17,24,39,.9); border: 1px solid rgba(255,255,255,.16); border-radius: 9px; box-shadow: 0 12px 28px rgba(15,23,42,.28); opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .14s ease, transform .14s ease; }
.media-edit-toolbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -21px; height: 21px; pointer-events: auto; }
.media-card-node:hover .media-edit-toolbar, .media-card-node.selected .media-edit-toolbar, .media-card-node:focus-within .media-edit-toolbar { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.media-tool-button { width: 32.5px; height: 32.5px; display: grid; place-items: center; padding: 0; color: rgba(255,255,255,.9); background: transparent; border: 0; border-radius: 6.5px; cursor: pointer; }
.media-tool-button:hover { color: #fff; background: rgba(255,255,255,.16); }
.media-tool-button svg { width: 16.9px; height: 16.9px; }
.media-delete-button { position: absolute; right: 7px; top: 7px; z-index: 9; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: rgba(255,255,255,.94); background: rgba(17,24,39,.76); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; box-shadow: 0 10px 24px rgba(15,23,42,.22); cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.94); transition: opacity .14s ease, transform .14s ease, background .14s ease; }
.media-card-node:hover .media-delete-button, .media-card-node.selected .media-delete-button, .media-card-node:focus-within .media-delete-button { opacity: 1; pointer-events: auto; transform: scale(1); }
.media-delete-button:hover { background: rgba(185,55,55,.88); color: #ffffff; }
.media-delete-button svg { width: 18.2px; height: 18.2px; }
.media-dims-tag { position: absolute; left: 7px; top: 7px; z-index: 6; max-width: calc(100% - 92px); padding: 4px 7px; overflow: hidden; color: #d9f2f3; background: rgba(17,24,39,.74); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(2px); transition: opacity .14s ease, transform .14s ease; }
.media-card-node:hover .media-dims-tag, .media-card-node.selected .media-dims-tag { opacity: 1; transform: translateY(0); }
.media-ai-badge { position: absolute; left: 7px; top: 7px; z-index: 8; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; overflow: hidden; color: #e9ffff; background: rgba(8,116,127,.88); border: 1px solid rgba(187,247,255,.42); border-radius: 6px; box-shadow: 0 8px 18px rgba(5,42,48,.18); backdrop-filter: blur(10px); pointer-events: none; opacity: 1; }
.media-ai-badge svg { width: 12px; height: 12px; }
.media-deleted-asset-badge { position: absolute; right: 7px; bottom: 7px; z-index: 9; max-width: calc(100% - 14px); height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; overflow: hidden; color: #7f1d1d; background: rgba(254,242,242,.96); border: 1px solid rgba(220,38,38,.3); border-radius: 6px; box-shadow: 0 7px 18px rgba(127,29,29,.12); font-size: 8px; font-weight: 850; pointer-events: none; }
.media-deleted-asset-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-deleted-asset-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.media-node-preview.api-generated .media-dims-tag { top: 36px; }
.media-grid-handle,
.media-generator-toggle { position: absolute; bottom: 7px; z-index: 8; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; color: #53606a; background: rgba(255,255,255,.9); border: 1px solid rgba(212,219,226,.82); border-radius: 8px; box-shadow: 0 8px 18px rgba(15,23,42,.16); opacity: 0; pointer-events: none; transform: scale(.94); transition: opacity .14s ease, transform .14s ease, background .14s ease, color .14s ease; }
.media-grid-handle { left: 7px; cursor: grab; }
.media-generator-toggle { left: 35px; cursor: pointer; }
.media-card-node:hover :is(.media-grid-handle, .media-generator-toggle),
.media-card-node:focus-within :is(.media-grid-handle, .media-generator-toggle),
.media-card-node.embedded-generator-open :is(.media-grid-handle, .media-generator-toggle),
.media-grid-handle.dragging { opacity: .94; pointer-events: auto; transform: scale(1); }
.media-grid-handle:hover,
.media-generator-toggle:hover,
.media-generator-toggle.active { color: #14252a; background: rgba(255,255,255,.98); border-color: rgba(160,170,180,.9); }
.media-grid-handle:active { cursor: grabbing; }
.media-grid-handle.dragging { color: #14252a; background: #ffffff; cursor: grabbing; transform: scale(.96); }
.media-generator-toggle:disabled { cursor: wait; opacity: .7; }
.media-grid-handle svg,
.media-generator-toggle svg { width: 14px; height: 14px; }
.media-card-node.embedded-generator-open, .media-card-node:has(.media-embedded-generator-panel) { z-index: 24; }
.media-embedded-generator-panel { position: absolute; left: 50%; top: calc(100% + 12px); z-index: 30; width: min(var(--embedded-generator-panel-w, 420px), calc(100vw - 56px)); height: min(var(--embedded-generator-panel-h, 452px), calc(100vh - 96px)); max-height: min(var(--embedded-generator-panel-h, 452px), calc(100vh - 96px)); display: flex; flex-direction: column; overflow: hidden; padding: 8px; color: var(--ink); background: rgba(255,255,255,.98); border: 1px solid rgba(226,232,240,.94); border-radius: 10px; box-shadow: 0 20px 58px rgba(15,23,42,.18); transform: translateX(-50%); pointer-events: auto; cursor: default; overscroll-behavior: contain; }
.embedded-generator-switch-button { min-width: 46px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 6px; color: #176d75; background: #f2f8f8; border: 1px solid rgba(30,158,170,.24); border-radius: 6px; cursor: pointer; font: inherit; font-size: 9px; font-weight: 850; line-height: 1; white-space: nowrap; }
.embedded-generator-switch-button:hover { color: #ffffff; background: #1e9eaa; border-color: #1e9eaa; }
.embedded-generator-switch-button:focus-visible { outline: 2px solid rgba(30,158,170,.52); outline-offset: 2px; }
.media-embedded-generator-close { flex: 0 0 auto; }
.media-embedded-generator-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 0; overscroll-behavior: contain; }
.media-embedded-generator-runtime { --compact-label-width: 58px; --compact-field-gap: 4px; --compact-row-gap: 10px; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.media-embedded-generator-runtime > .node-editor,
.media-embedded-generator-runtime .comfy-node-editor { display: flex !important; flex: 1 1 auto; min-height: 0; overflow: hidden !important; }
.media-embedded-generator-runtime .comfy-collapsed-editor { flex: 0 0 auto !important; overflow: hidden !important; }
.media-embedded-generator-runtime .comfy-collapsed-editor .comfy-prompt-section { padding-bottom: 0; }
.media-embedded-generator-runtime .comfy-node-scroll-region { flex: 1 1 auto !important; min-height: 0; overflow-y: auto !important; overflow-x: hidden !important; max-height: none !important; padding-right: 4px; overscroll-behavior: contain; }
.media-embedded-generator-runtime .comfy-editor-section,
.media-embedded-generator-runtime .comfy-prompt-section { display: block !important; }
.media-embedded-generator-runtime .comfy-param-grid { display: grid !important; }
.media-embedded-generator-runtime .compact-param-grid { display: flex !important; flex-direction: column; }
.media-embedded-generator-runtime :is(.compact-fixed-row, .compact-param-row) { display: grid !important; }
.media-embedded-generator-body > .node-header { border: 1px solid var(--soft-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #ffffff; }
.media-embedded-generator-body > :last-child { margin-bottom: 0; }
.media-embedded-generator-body .node-fields,
.media-embedded-generator-body .node-note,
.media-embedded-generator-body .node-editor,
.media-embedded-generator-body .comfy-node-brief { background: #ffffff; }
.canvas-node.node-body-deferred:not(.node-full-detail) .media-embedded-generator-panel :is(input, textarea, select, button) { pointer-events: auto !important; }
.canvas-node.node-body-deferred:not(.node-full-detail) .media-embedded-generator-panel :is(.node-editor, .comfy-node-editor, .comfy-node-scroll-region, .llm-card-body, .node-footer, .comfy-lora-list) { display: flex !important; }
.canvas-node.node-body-deferred:not(.node-full-detail) .media-embedded-generator-panel :is(.node-fields, .comfy-param-grid) { display: grid !important; }
.canvas-node.node-body-deferred:not(.node-full-detail) .media-embedded-generator-panel .compact-param-grid { display: flex !important; flex-direction: column; }
.canvas-node.node-body-deferred:not(.node-full-detail) .media-embedded-generator-panel :is(.compact-fixed-row, .compact-param-row) { display: grid !important; }
.canvas-node.node-body-deferred:not(.node-full-detail) .media-embedded-generator-panel .node-run-compact { display: inline-flex !important; }
.canvas-node.node-body-deferred:not(.node-full-detail) .media-embedded-generator-panel :is(.node-note, .prompt-content, .system-node-summary, .comfy-editor-section, .comfy-prompt-section) { display: block !important; }
/* Deferred nodes render only the stable shell. Do not resurrect an embedded
   editor panel through legacy high-detail overrides while the node is out of
   the viewport. */
.canvas-node.node-body-deferred:not(.node-full-detail) .media-embedded-generator-panel { display: none !important; pointer-events: none !important; }
.embedded-generator-type-switch { flex: 0 0 76px; width: 76px; height: 24px; padding: 0 20px 0 7px; color: #4f6269; background-color: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; outline: none; background-position: right 6px center; background-size: 10px 10px; font: inherit; font-size: 9px; font-weight: 800; }
.embedded-generator-type-switch:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.media-embedded-generator-body .node-header-actions { gap: 5px; }
.media-drag-preview { position: fixed; left: -10000px; top: -10000px; z-index: -1; width: 128px; height: 128px; display: grid; place-items: center; overflow: hidden; background: #0f172a; border-radius: 8px; pointer-events: none; }
.media-drag-preview img,
.media-drag-preview video { width: 128px; height: 128px; display: block; object-fit: contain; }
.media-mask-badge { position: absolute; left: 63px; bottom: 9px; z-index: 7; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; color: #14252a; background: rgba(215,247,235,.92); border: 1px solid rgba(128,210,179,.7); border-radius: 6px; opacity: 0; pointer-events: none; transform: scale(.92); transition: opacity .14s ease, transform .14s ease; }
.media-card-node:hover .media-mask-badge { opacity: .9; transform: scale(1); }
.media-mask-badge svg { width: 11px; height: 11px; }
.media-role-badge { position: absolute; top: 7px; left: 7px; z-index: 6; max-width: calc(100% - 78px); display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: #d9f2f3; background: rgba(17,24,39,.78); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; backdrop-filter: blur(10px); pointer-events: none; }
.media-dims-tag ~ .media-role-badge { top: 34px; }
.media-node-preview.api-generated .media-role-badge { top: 36px; }
.media-node-preview.api-generated .media-dims-tag ~ .media-role-badge { top: 65px; }
.media-role-badge span, .media-role-badge strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-role-badge span { color: #9ddce0; font-size: 8px; font-weight: 800; }
.media-role-badge strong { color: #ffffff; font-size: 9px; font-weight: 800; }
.media-role-badge[data-role="origin"] { background: rgba(23,83,72,.82); }
.media-role-badge[data-role="reference"] { background: rgba(61,65,120,.82); }
.media-role-badge[data-role="mask"] { background: rgba(112,66,28,.82); }
.media-audio-preview { width: 100%; height: 100%; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; color: #527277; background: #eef6f6; border-radius: inherit; cursor: default; }
.media-audio-preview svg { width: 30px; height: 30px; }
.media-audio-preview audio { width: min(92%, 360px); }
.media-video-shell { position: relative; min-height: 150px; display: grid; place-items: center; overflow: hidden; background: #101c22; border-radius: inherit; }
.media-video-shell video { position: relative; z-index: 2; }
.media-video-shell .media-video-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; border-radius: inherit; background: #101c22; pointer-events: none; }
.media-video-shell:not(.media-video-ready) video { visibility: hidden; }
.media-video-shell.media-video-ready .media-video-poster { opacity: 0; }
.media-lazy-placeholder { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; gap: 7px; align-content: center; color: rgba(220,239,240,.78); background: #1c3036; font-size: 10px; font-weight: 750; pointer-events: none; }
.media-lazy-placeholder svg { width: 28px; height: 28px; }
.media-video-shell.media-source-loaded .media-lazy-placeholder { display: none; }
.media-node-actions { display: flex; align-items: center; gap: 5px; padding-top: 8px; }
.media-card-node .media-node-actions { padding: 6px 0 0; }
.canvas-node.image-node .node-editor, .canvas-node.media-node .node-editor, .canvas-node.audio-node .node-editor, .canvas-node.output-node .node-editor { display: none; }
.node-inline-action { min-width: 0; height: 27px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1; padding: 0 7px; color: var(--muted); background: #ffffff; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; font-size: 9px; font-weight: 700; }
.node-inline-action:hover { color: var(--ink); border-color: var(--cyan); background: var(--cyan-soft); }
.node-inline-action svg { width: 12px; height: 12px; }
.media-node-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding-top: 6px; }
.media-node-meta-grid div { min-width: 0; padding: 6px; background: rgba(255,255,255,.92); border: 1px solid var(--soft-line); border-radius: 5px; }
.media-node-meta-grid span, .media-node-meta-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-node-meta-grid span { color: var(--muted); font-size: 8px; font-weight: 800; }
.media-node-meta-grid strong { margin-top: 3px; color: var(--ink); font-size: 9px; }
.node-context-menu { position: absolute; z-index: 30; width: 176px; padding: 5px; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 18px 42px rgba(31,52,59,.2); }
.node-context-menu[hidden] { display: none; }
.canvas-create-menu { position: absolute; z-index: 31; width: 214px; max-height: min(520px, calc(100% - 18px)); overflow: auto; padding: 6px; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 18px 42px rgba(31,52,59,.2); }
.canvas-create-menu.compact { width: 188px; }
.canvas-create-menu.port-create-menu { border-color: rgba(30,158,170,.4); box-shadow: 0 18px 42px rgba(30,95,105,.18); }
.canvas-create-menu .menu-section-title { padding: 7px 9px 5px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.canvas-view.drag-over::after { content: "Drop media to canvas"; position: absolute; inset: 0; z-index: 18; display: grid; place-items: center; color: #42666a; background: rgba(245,248,248,.62); border: 2px dashed rgba(30,158,170,.34); font-size: 13px; font-weight: 800; letter-spacing: .12em; pointer-events: none; }
.selection-box { position: absolute; z-index: 28; border: 1px solid rgba(30,158,170,.86); background: rgba(30,158,170,.12); border-radius: 3px; pointer-events: none; }
.node-menu-item { width: 100%; min-height: 31px; display: flex; align-items: center; gap: 8px; padding: 0 9px; color: var(--ink); background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; font-size: 10px; font-weight: 700; }
.node-menu-item:hover { background: #eef5f5; }
.node-menu-item:disabled { color: var(--faint); cursor: not-allowed; background: transparent; }
.node-menu-item.danger { color: #b24a4a; }
.node-menu-item.danger:hover { color: #a33c3c; background: #fff0f0; }
.node-menu-item svg { width: 14px; height: 14px; flex: 0 0 auto; }
.node-menu-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-menu-badge { flex: 0 0 auto; margin-left: auto; padding: 0 5px; color: #9a6a0a; background: #fff6df; border: 1px solid #ead59a; border-radius: 999px; font-size: 8px; font-weight: 850; line-height: 16px; }
.node-menu-divider { display: block; height: 1px; margin: 4px 3px; background: var(--soft-line); }
.node-dev-badge { display: inline-flex; align-items: center; height: 16px; margin-left: 4px; padding: 0 5px; vertical-align: 1px; color: #9a6a0a; background: #fff6df; border: 1px solid #ead59a; border-radius: 999px; font-size: 8px; font-weight: 850; line-height: 16px; }
.media-preview-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(22,35,40,.56); backdrop-filter: blur(8px); }
.media-preview-dialog { width: min(1120px, max(70vw, 720px), calc(100vw - 56px)); height: min(780px, max(70vh, 520px), calc(100vh - 56px)); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 30px 90px rgba(20,35,40,.3); }
.media-detail-preview-dialog { width: min(1680px, calc(100vw - 56px)); height: min(1060px, calc(100vh - 56px)); }
.media-preview-dialog header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); }
.media-preview-dialog header > div:not(.media-preview-head-actions) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.media-preview-dialog header strong, .media-preview-dialog header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-preview-dialog header strong { color: var(--ink); font-size: 13px; }
.media-preview-dialog header small { color: var(--muted); font-size: 9px; }
.media-preview-head-actions { min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; }
.media-preview-body { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.media-detail-preview-dialog .media-preview-body { grid-template-columns: minmax(0, 1fr) minmax(260px, 306px); }
.media-preview-stage-shell { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #ffffff; overflow: hidden; }
.media-preview-toolbar { position: absolute; left: 18px; bottom: 18px; z-index: 7; min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 6px; background: rgba(255,255,255,.92); border: 1px solid rgba(219,228,229,.92); border-radius: 8px; box-shadow: 0 8px 24px rgba(31,52,59,.14); backdrop-filter: blur(6px); }
.media-preview-toolbar .icon-button.tiny { width: 26px; height: 26px; }
.media-preview-toolbar .icon-button.active { color: #ffffff; background: var(--cyan); border-color: var(--cyan); }
.media-preview-zoom-pill { min-width: 48px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font: inherit; font-size: 10px; font-weight: 900; }
.media-preview-zoom-pill:hover { border-color: rgba(30,158,170,.34); background: #f4fbfb; }
.media-preview-stage { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; box-sizing: border-box; padding: 18px; overflow: hidden; background: #ffffff; }
.media-preview-stage-shell .media-preview-stage { flex: 1 1 auto; }
.media-preview-stage.is-zoom-enabled { touch-action: none; }
.media-preview-stage.is-zoomed { cursor: grab; }
.media-preview-stage.is-dragging { cursor: grabbing; }
.media-preview-frame { --media-preview-zoom: 1; --media-preview-x: 0px; --media-preview-y: 0px; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; transform: translate3d(var(--media-preview-x), var(--media-preview-y), 0) scale(var(--media-preview-zoom)); transform-origin: center center; will-change: transform; }
.media-preview-stage img, .media-preview-stage video { width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: contain; }
.media-detail-preview-dialog .media-preview-stage img, .media-detail-preview-dialog .media-preview-stage video { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.media-detail-preview-dialog .media-editor-image-wrap img { width: var(--editor-preview-display-w, auto); height: var(--editor-preview-display-h, auto); max-width: min(1520px, calc(100vw - 380px)); max-height: min(920px, calc(100vh - 240px)); }
.media-preview-compare { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; }
.media-preview-compare[hidden] { display: none; }
.media-preview-compare-inner { --media-preview-zoom: 1; --media-preview-x: 0px; --media-preview-y: 0px; position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; transform: translate3d(var(--media-preview-x), var(--media-preview-y), 0) scale(var(--media-preview-zoom)); transform-origin: center center; will-change: transform; background: #101c22; }
.media-preview-compare-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.media-preview-compare-inner::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--media-preview-compare-split, 50%); z-index: 5; width: 3px; transform: translateX(-50%); background: #ffffff; box-shadow: 0 0 0 1px rgba(15,23,42,.5), 0 0 16px rgba(0,0,0,.32); pointer-events: none; }
.media-preview-compare-original { position: absolute; inset: 0; overflow: hidden; border-right: 2px solid rgba(255,255,255,.86); box-shadow: 8px 0 18px rgba(0,0,0,.16); }
.media-preview-compare-slider { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 6; width: 3px; transform: translateX(-50%); background: transparent; cursor: ew-resize; }
.media-preview-compare-slider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 22px; }
.media-preview-compare-slider svg { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; padding: 4px; color: #ffffff; background: rgba(15,23,42,.72); border-radius: 999px; transform: translate(-50%, -50%); }
.media-preview-stage audio { width: min(620px, 90%); }
.media-preview-meta { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #f7faf9; border-left: 1px solid var(--line); overflow: auto; }
.media-preview-meta div { min-width: 0; padding: 9px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-preview-meta span { display: block; color: var(--muted); font-size: 8px; font-weight: 800; }
.media-preview-meta strong { display: block; margin-top: 4px; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.media-detail-meta { gap: 10px; user-select: text; }
.media-detail-meta .media-preview-section, .media-detail-meta .media-preview-basic-grid, .media-detail-meta .media-preview-generation { min-width: 0; padding: 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-detail-meta .media-preview-section-head { min-height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.media-detail-meta .media-preview-section-head span { font-size: 9px; }
.media-detail-meta .media-preview-section-head .icon-button { width: 24px; height: 24px; flex: 0 0 auto; }
.media-detail-meta .media-preview-path p { margin: 6px 0 0; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 800; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; user-select: text; cursor: pointer; }
.media-detail-meta .media-preview-path p.expanded { max-height: 96px; overflow: auto; word-break: break-all; white-space: normal; }
.media-preview-basic-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(144px, .75fr); gap: 8px; }
.media-preview-basic-grid div, .media-preview-param-grid div, .media-preview-lora-list div:not(.media-preview-section-head) { min-width: 0; padding: 8px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-preview-basic-grid span, .media-preview-param-grid span, .media-preview-lora-list span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; }
.media-preview-basic-grid strong, .media-preview-param-grid strong, .media-preview-lora-list strong { display: block; margin-top: 5px; overflow: hidden; color: var(--ink); font-size: 12px; line-height: 1.38; text-overflow: ellipsis; white-space: nowrap; }
.media-preview-basic-item.compact strong { font-size: 11px; }
.media-preview-basic-item.expandable strong { cursor: pointer; }
.media-preview-basic-item.expandable strong.expanded { max-height: 74px; overflow: auto; word-break: break-all; white-space: normal; }
.media-preview-param-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.media-preview-compact-param-grid { grid-template-columns: minmax(0, 1.45fr) minmax(144px, .75fr); }
.media-preview-lora-list { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.media-preview-lora-list .media-preview-section-head { margin-bottom: -1px; }
.media-preview-lora-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(72px, 1fr); align-items: center; gap: 8px; }
.media-preview-lora-row .media-preview-lora-name { min-width: 0; width: 100%; margin-top: 0; cursor: pointer; }
.media-preview-lora-row.expanded .media-preview-lora-name, .media-preview-lora-row .media-preview-lora-name.expanded { max-height: none; overflow: visible; text-overflow: clip; word-break: break-all; white-space: normal; }
.media-preview-lora-row .media-preview-lora-strength { min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.media-preview-lora-grid .media-preview-lora-name-cell { cursor: pointer; }
.media-preview-lora-grid .media-preview-lora-name-cell.expanded strong { max-height: none; overflow: visible; text-overflow: clip; word-break: break-all; white-space: normal; }
.media-preview-prompt p { max-height: 160px; margin: 6px 0 0; overflow: auto; color: #506169; font-size: 10px; line-height: 1.5; white-space: pre-wrap; }
.media-detail-meta .media-preview-prompt { padding: 10px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-detail-meta .media-preview-prompt p { min-height: 224px; max-height: 620px; overflow: auto; color: #334155; font-size: 12px; line-height: 1.58; user-select: text; }
.media-detail-meta { user-select: text; }
.media-detail-meta .media-preview-basic-grid,
.media-detail-meta .media-preview-param-grid,
.media-detail-meta .media-preview-compact-param-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.media-detail-meta .media-preview-basic-grid { margin-top: 0; }
.media-detail-meta .media-preview-basic-grid div,
.media-detail-meta .media-preview-param-grid div,
.media-detail-meta .media-preview-lora-list div:not(.media-preview-section-head) { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px 8px; }
.media-detail-meta .media-preview-basic-grid span,
.media-detail-meta .media-preview-param-grid span,
.media-detail-meta .media-preview-lora-list span { min-width: 0; margin: 0; font-size: 9px; line-height: 1.5; }
.media-detail-meta .media-preview-basic-grid strong,
.media-detail-meta .media-preview-param-grid strong,
.media-detail-meta .media-preview-lora-list strong { min-width: 0; margin: 0; overflow: visible; font-size: 10px; line-height: 1.5; text-overflow: clip; white-space: normal; word-break: break-word; user-select: text; cursor: text; }
.media-detail-meta .media-preview-path { display: grid; grid-template-columns: 72px minmax(0, 1fr) 24px; align-items: start; gap: 8px; }
.media-detail-meta .media-preview-path .media-preview-section-head { display: contents; }
.media-detail-meta .media-preview-path .media-preview-section-head span { grid-column: 1; color: var(--muted); font-size: 9px; line-height: 1.5; }
.media-detail-meta .media-preview-path .media-preview-section-head .icon-button { grid-column: 3; width: 24px; height: 24px; }
.media-detail-meta .media-preview-path p { grid-column: 2; min-width: 0; margin: 0; overflow: visible; font-size: 10px; line-height: 1.5; text-overflow: clip; white-space: normal; word-break: break-word; }
.media-detail-meta .media-preview-path p { user-select: text; cursor: text; }
.media-detail-meta .media-preview-section, .media-detail-meta .media-preview-basic-grid, .media-detail-meta .media-preview-generation { padding: 9px; }
.media-detail-meta .media-preview-prompt p { min-height: 202px; max-height: 558px; }
.media-detail-meta .media-preview-basic-grid div,
.media-detail-meta .media-preview-param-grid div,
.media-detail-meta .media-preview-lora-list div:not(.media-preview-section-head) { grid-template-columns: 52px minmax(0, 1fr); gap: 5px; padding: 6px 7px; }
.media-detail-meta .media-preview-basic-grid strong,
.media-detail-meta .media-preview-param-grid strong,
.media-detail-meta .media-preview-lora-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; cursor: pointer; }
.media-detail-meta .media-preview-basic-grid strong.expanded,
.media-detail-meta .media-preview-param-grid strong.expanded,
.media-detail-meta .media-preview-lora-list strong.expanded,
.media-detail-meta .media-preview-param-dl dd strong.expanded,
.media-detail-meta .media-preview-param-dl dd pre.expanded { max-height: 120px; overflow: auto; text-overflow: clip; white-space: normal; word-break: break-word; }
.media-detail-meta .media-preview-path { display: block; }
.media-detail-meta .media-preview-path .media-preview-section-head { min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.media-detail-meta .media-preview-path .media-preview-section-head span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.media-detail-meta .media-preview-path .media-preview-section-head .icon-button { width: 24px; height: 24px; }
.media-detail-meta .media-preview-path p,
.media-detail-meta .media-preview-path p.expanded { min-width: 0; max-height: none; margin: 5px 0 0; overflow: hidden; font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
.media-detail-meta .media-preview-param-dl { grid-template-columns: 52px minmax(0, 1fr); }
.media-detail-meta .media-preview-param-dl dt,
.media-detail-meta .media-preview-param-dl dd { padding: 6px 7px; }
.media-detail-meta .media-preview-param-dl dd strong,
.media-detail-meta .media-preview-param-dl dd pre { max-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; cursor: pointer; }
.media-detail-meta .media-preview-param-dl dd strong.expanded,
.media-detail-meta .media-preview-param-dl dd pre.expanded { max-height: 120px; overflow: auto; text-overflow: clip; white-space: normal; word-break: break-word; }
.media-detail-meta .media-preview-basic-card { padding: 8px 9px; }
.media-detail-meta .media-preview-basic-card .media-preview-section-head,
.media-detail-meta .media-preview-lora-panel .media-preview-section-head { min-height: 18px; }
.media-detail-meta .media-preview-basic-grid { display: flex; flex-direction: column; gap: 0; margin-top: 4px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.media-detail-meta .media-preview-basic-grid div { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 6px; padding: 6px 0; background: transparent; border: 0; border-top: 1px solid var(--soft-line); border-radius: 0; }
.media-detail-meta .media-preview-basic-grid div:first-child { border-top: 0; }
.media-detail-meta .media-preview-basic-grid span { font-size: 9px; line-height: 1.42; }
.media-detail-meta .media-preview-basic-grid strong { font-size: 10px; line-height: 1.42; }
.media-detail-meta .media-preview-generation { padding: 8px 9px; }
.media-detail-meta .media-preview-prompt { padding: 8px; }
.media-detail-meta .media-preview-prompt p { min-height: 160px; max-height: 389px; margin-top: 5px; font-size: 11px; line-height: 1.5; }
.media-detail-meta .media-preview-lora-panel { margin-top: 8px; padding: 7px 8px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-detail-meta .media-preview-lora-list { display: flex; flex-direction: column; gap: 0; max-height: 154px; margin-top: 4px; padding: 0; overflow: auto; background: transparent; border: 0; border-radius: 0; }
.media-detail-meta .media-preview-lora-panel .media-preview-lora-list div.media-preview-lora-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 6px 0; background: transparent; border: 0; border-top: 1px solid var(--soft-line); border-radius: 0; }
.media-detail-meta .media-preview-lora-row:first-child { border-top: 0; }
.media-detail-meta .media-preview-lora-row strong.media-preview-lora-name { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-size: 10px; line-height: 1.42; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.media-detail-meta .media-preview-lora-row strong.media-preview-lora-name.expanded { max-height: 88px; overflow: auto; text-overflow: clip; white-space: normal; word-break: break-word; }
.media-detail-meta .media-preview-lora-row .media-preview-lora-strength { min-width: 0; display: block; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 850; line-height: 1.42; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.media-preview-active-copy-value { background: rgba(30,158,170,.1); border-radius: 4px; outline: 1px solid rgba(30,158,170,.18); outline-offset: 1px; }
.media-preview-details-toggle { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding: 0 9px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; cursor: pointer; font: inherit; }
.media-preview-details-toggle span { display: block; color: var(--ink); font-size: 11px; font-weight: 900; }
.media-preview-details-toggle:hover { border-color: rgba(30,158,170,.32); background: #f4fbfb; }
.media-preview-details-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.media-preview-meta .media-preview-details-body { padding: 0; background: transparent; border: 0; border-radius: 0; }
.media-preview-details-body[hidden] { display: none; }
.media-preview-archive-section { border-color: rgba(30,158,170,.28) !important; }
.media-preview-source-section { border-color: rgba(110,135,141,.28) !important; }
.media-preview-archive-grid { margin-top: 4px; }
.media-preview-archive-field { min-width: 0; margin-top: 8px; padding: 8px !important; background: #fbfdfd !important; border: 1px solid var(--soft-line) !important; border-radius: 6px !important; }
.media-preview-archive-field .media-preview-section-head { min-height: 18px; }
.media-preview-archive-field p { margin: 5px 0 0; max-height: 88px; overflow: auto; color: #334155; font-size: 10px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.media-preview-archive-classification { display: flex; flex-direction: column; gap: 0; margin: 5px 0 0; }
.media-preview-archive-classification div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px; padding: 5px 0; border-top: 1px solid var(--soft-line); }
.media-preview-archive-classification div:first-child { border-top: 0; }
.media-preview-archive-classification dt { color: var(--muted); font-size: 9px; font-weight: 850; }
.media-preview-archive-classification dd { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-size: 10px; line-height: 1.42; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.media-preview-archive-classification dd.expanded { max-height: 100px; overflow: auto; text-overflow: clip; white-space: normal; word-break: break-word; }
.media-preview-archived-generation { padding: 8px 9px !important; }
.media-preview-archived-generation > .media-preview-details-toggle { margin-top: 0; }
.media-preview-archive-edit-dialog { width: min(620px, calc(100vw - 40px)); max-height: min(820px, calc(100vh - 40px)); overflow: auto; }
.asset-edit-overlay.media-preview-archive-edit-overlay { z-index: 120; }
.media-preview-archive-edit-dialog header > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.media-preview-archive-edit-dialog header small { color: var(--muted); font-size: 9px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-preview-archive-edit-dialog textarea[data-media-preview-archive-ocr] { min-height: 132px; }
.media-preview-detail-param-grid { margin-top: 0; }
.media-preview-readable-params { min-width: 0; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.media-preview-readable-params > span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; }
.media-preview-readable-params > strong { display: block; margin-top: 6px; color: var(--ink); font-size: 11px; }
.media-preview-param-dl { min-width: 0; display: grid; grid-template-columns: minmax(118px, .82fr) minmax(0, 1.4fr); margin: 7px 0 0; overflow: hidden; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-preview-param-dl dt, .media-preview-param-dl dd { min-width: 0; margin: 0; padding: 8px 9px; border-top: 1px solid var(--soft-line); }
.media-preview-param-dl dt:nth-of-type(1), .media-preview-param-dl dd:nth-of-type(1) { border-top: 0; }
.media-preview-param-dl dt { overflow: hidden; color: #6f8288; background: #f3f7f7; font-size: 10px; font-weight: 900; line-height: 1.42; text-overflow: ellipsis; white-space: nowrap; }
.media-preview-param-dl dd { color: var(--ink); background: #ffffff; font-size: 11px; font-weight: 800; line-height: 1.48; }
.media-preview-param-dl dd strong { display: block; margin: 0; overflow: hidden; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.media-preview-param-dl dd pre { max-height: 168px; margin: 0; overflow: auto; color: #334155; font: inherit; font-size: 10px; font-weight: 750; line-height: 1.52; white-space: pre-wrap; word-break: break-word; }
.media-preview-json span { color: var(--muted); font-size: 10px; font-weight: 850; }
.media-preview-run-params pre { max-height: none; }
.media-preview-trace p { max-height: 92px; margin: 6px 0 0; overflow: auto; color: #506169; font-size: 9px; line-height: 1.45; white-space: pre-wrap; }
.media-preview-trace pre { max-height: 180px; margin: 6px 0 0; overflow: auto; color: #334155; font-size: 9px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.media-preview-json pre { max-height: 220px; margin: 6px 0 0; overflow: auto; color: #334155; font-size: 9px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.media-preview-json.media-preview-run-params pre { max-height: none; }
.media-timeline-dialog { width: min(1680px, calc(100vw - 56px)); height: min(1060px, calc(100vh - 56px)); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 32px 96px rgba(20,35,40,.32); }
.media-timeline-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); }
.media-timeline-title { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 900; }
.media-timeline-title svg { width: 16px; height: 16px; flex: 0 0 auto; }
.media-timeline-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-timeline-body { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.media-timeline-stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 18px; background: #020817; }
.media-timeline-stage video { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; background: #020817; border-radius: 8px; }
.media-timeline-stage audio { width: min(680px, 90%); }
.media-timeline-busy { position: absolute; left: 50%; top: 50%; z-index: 3; padding: 10px 14px; color: #ffffff; background: rgba(15,23,42,.82); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 11px; font-weight: 900; transform: translate(-50%, -50%); }
.media-timeline-panel { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #fbfcfd; border-left: 1px solid var(--line); overflow: auto; }
.media-timeline-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.media-timeline-meta div { min-width: 0; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.media-timeline-meta span, .media-timeline-meta strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-timeline-meta span { color: #7a8ca5; font-size: 10px; font-weight: 850; }
.media-timeline-meta strong { margin-top: 5px; color: #0f172a; font-size: 13px; font-weight: 900; }
.media-timeline-range { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: #536376; font-size: 11px; font-weight: 850; }
.media-timeline-range input { grid-column: 1 / -1; width: 100%; accent-color: #142033; }
.media-timeline-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.media-timeline-time-row label { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: #6b7d93; font-size: 10px; font-weight: 850; }
.media-timeline-time-row input { width: 100%; height: 34px; padding: 0 10px; color: #0f172a; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 800; }
.media-timeline-frame-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.media-timeline-frame-tools label { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: #6b7d93; font-size: 10px; font-weight: 850; }
.media-timeline-frame-tools input { width: 100%; height: 34px; padding: 0 10px; color: #0f172a; background: #ffffff; border: 1px solid #dbe3ee; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 800; }
.media-timeline-frame-tools > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.media-timeline-row-actions, .media-timeline-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.media-timeline-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-timeline-btn { min-width: 0; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; color: #142033; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 9px; font: inherit; font-size: 11px; font-weight: 900; white-space: nowrap; cursor: pointer; }
.media-timeline-btn:hover { border-color: rgba(30,158,170,.5); background: #f1fbfb; }
.media-timeline-btn.primary { color: #ffffff; background: #111827; border-color: #111827; }
.media-timeline-btn:disabled { color: #9aa8bd; background: #f3f6fa; border-color: #e5eaf1; cursor: not-allowed; }
.media-timeline-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.media-timeline-status { margin: 0; color: #52657d; font-size: 11px; line-height: 1.5; font-weight: 700; }
.media-editor-overlay { position: fixed; inset: 0; z-index: 102; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(22,35,40,.58); backdrop-filter: blur(8px); }
.media-editor-dialog { width: min(1180px, max(70vw, 760px), calc(100vw - 56px)); height: min(820px, max(70vh, 540px), calc(100vh - 56px)); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 32px 96px rgba(20,35,40,.32); }
.media-editor-dialog header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); }
.media-editor-dialog header div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.media-editor-dialog header strong, .media-editor-dialog header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-editor-dialog header strong { color: var(--ink); font-size: 13px; }
.media-editor-dialog header small { color: var(--muted); font-size: 9px; }
.media-editor-toolbar { min-height: 42px; display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: #f8faf9; border-bottom: 1px solid var(--soft-line); overflow-x: auto; }
.media-editor-tool { height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; color: #506169; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; font: inherit; font-size: 10px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.media-editor-tool:hover, .media-editor-tool.active { color: #14252a; border-color: rgba(30,158,170,.55); background: #eefafa; }
.media-editor-tool svg { width: 13px; height: 13px; }
.media-editor-body { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 272px; }
.media-editor-stage { min-height: 0; overflow: auto; display: grid; place-items: center; padding: 18px; background: #101c22; }
.media-editor-image-wrap { --editor-zoom: 1; position: relative; display: inline-block; line-height: 0; transform: scale(var(--editor-zoom)); transform-origin: center center; }
.media-editor-image-wrap img { display: block; max-width: min(100%, 920px); max-height: calc(70vh - 172px); object-fit: contain; border-radius: 6px; background: #0f172a; }
.media-editor-image-wrap [data-editor-compare-image] { display: none; }
.media-editor-overlay[data-compare-mode="on"] .media-editor-image-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.media-editor-overlay[data-compare-mode="on"] .media-editor-image-wrap [data-editor-compare-image] { display: block; }
.media-editor-overlay[data-compare-mode="on"] .media-editor-image-wrap canvas, .media-editor-overlay[data-compare-mode="on"] .media-editor-crop-box, .media-editor-overlay[data-compare-mode="on"] .media-editor-grid-lines { display: none; }
.media-editor-image-wrap canvas, .media-editor-crop-box, .media-editor-grid-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-editor-image-wrap canvas { opacity: .42; mix-blend-mode: screen; }
.media-editor-crop-box { display: none; border: 2px solid #ffffff; box-shadow: 0 0 0 9999px rgba(15,23,42,.48), 0 10px 26px rgba(15,23,42,.24); border-radius: 6px; cursor: move; box-sizing: border-box; }
.media-editor-crop-box span { position: absolute; width: 13px; height: 13px; background: #ffffff; border: 2px solid #1e9eaa; border-radius: 4px; }
.media-editor-crop-box [data-crop-handle="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.media-editor-crop-box [data-crop-handle="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.media-editor-crop-box [data-crop-handle="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.media-editor-crop-box [data-crop-handle="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.media-editor-overlay[data-editor-mode="crop"] .media-editor-crop-box { display: block; }
.media-editor-overlay[data-editor-mode="mask"] .media-editor-image-wrap canvas, .media-editor-overlay[data-editor-mode="brush"] .media-editor-image-wrap canvas { cursor: crosshair; opacity: .58; }
.media-editor-grid-lines { pointer-events: none; display: none; }
.media-editor-overlay[data-editor-mode="grid"] .media-editor-grid-lines { display: block; }
.media-editor-grid-lines i, .media-editor-grid-lines b { position: absolute; display: block; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(17,24,39,.28); }
.media-editor-grid-lines i { left: 0; right: 0; height: 2px; }
.media-editor-grid-lines b { top: 0; bottom: 0; width: 2px; }
.media-editor-side { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #f7faf9; border-left: 1px solid var(--line); overflow: auto; }
.media-editor-side div { min-width: 0; padding: 9px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-editor-side span { display: block; color: var(--muted); font-size: 8px; font-weight: 800; }
.media-editor-side strong { display: block; margin-top: 4px; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.media-editor-prompt p { max-height: 150px; margin: 6px 0 0; overflow: auto; color: #506169; font-size: 10px; line-height: 1.5; white-space: pre-wrap; }
.media-editor-footer { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); background: #ffffff; }
.media-editor-controls { min-width: 0; display: flex; align-items: center; gap: 8px; color: #506169; font-size: 10px; font-weight: 850; overflow-x: auto; }
.media-editor-controls label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.media-editor-controls input[type="range"] { width: 150px; accent-color: #1e9eaa; }
.media-editor-controls input[type="number"] { width: 54px; height: 28px; padding: 0 6px; border: 1px solid var(--soft-line); border-radius: 5px; font: inherit; font-size: 10px; font-weight: 850; }
.media-editor-dialog { width: min(1680px, calc(100vw - 56px)); height: min(1060px, calc(100vh - 56px)); border-radius: 12px; }
.media-editor-head { min-height: 62px; display: grid; grid-template-columns: minmax(190px, 280px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); }
.media-editor-dialog header .media-editor-head-actions { min-width: auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; }
.media-editor-overlay:not([data-editor-mode="preview"]) [data-editor-fullscreen],
.media-editor-overlay:not([data-editor-mode="preview"]) [data-editor-download] { display: none !important; }
.media-editor-titlebar { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.media-editor-titlebar strong { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.media-editor-titlebar small { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.media-editor-dialog header .media-editor-top-controls { min-width: 0; min-height: 0; display: none; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; background: transparent; border: 0; }
.media-editor-overlay[data-editor-mode="mask"] .media-editor-top-controls,
.media-editor-overlay[data-editor-mode="brush"] .media-editor-top-controls,
.media-editor-overlay[data-editor-mode="grid"] .media-editor-top-controls { display: flex; }
.media-editor-top-controls label, .media-editor-check, .media-editor-grid-regular, .media-editor-grid-custom, .media-editor-grid-amount { display: inline-flex; align-items: center; gap: 7px; color: #506169; font-size: 10px; font-weight: 850; white-space: nowrap; }
.media-editor-top-controls input[type="range"] { width: 128px; accent-color: #1e9eaa; }
.media-editor-top-controls input[type="number"], .media-editor-grid-amount input[type="number"] { width: 58px; height: 28px; padding: 0 7px; color: var(--ink); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; font: inherit; font-size: 10px; font-weight: 850; }
.media-editor-color input[type="color"] { width: 28px; height: 26px; padding: 0; background: #fff; border: 1px solid var(--soft-line); border-radius: 7px; }
.media-editor-value { min-width: 44px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; color: #fff; background: #14252a; border-radius: 999px; font-size: 10px; font-weight: 900; font-variant-numeric: tabular-nums; }
.media-editor-chip { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; color: #506169; background: #fff; border: 1px solid var(--soft-line); border-radius: 999px; font-size: 10px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.media-editor-chip:hover, .media-editor-chip.active { color: #143033; border-color: rgba(30,158,170,.52); background: #eefafa; }
.media-editor-chip:disabled { opacity: .45; cursor: not-allowed; }
.media-editor-chip svg { width: 13px; height: 13px; }
.media-editor-chip.icon-only { width: 28px; padding: 0; }
.media-editor-stepper { display: inline-flex; align-items: center; gap: 4px; }
.media-editor-chip.tone .tone-swatch { width: 13px; height: 13px; border-radius: 999px; border: 1px solid rgba(15,23,42,.24); background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.media-editor-chip.tone.is-white .tone-swatch { background: #fff; }
.media-editor-opacity { min-width: 168px; }
.media-editor-opacity input[type="range"] { width: 82px; accent-color: #14252a; }
.media-editor-segment { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: #f3f7f7; border: 1px solid var(--soft-line); border-radius: 999px; }
.media-editor-segment button { height: 24px; min-width: 42px; padding: 0 9px; color: #64777e; border-radius: 999px; font-size: 10px; font-weight: 900; }
.media-editor-segment button.active { color: #fff; background: #14252a; }
.media-editor-stage { min-height: 0; flex: 1; position: relative; display: block; overflow: auto; padding: 0; background: #f4f7f7; border: 0; }
.media-editor-stage.panning { cursor: grabbing; }
.media-editor-stage-inner { min-width: 100%; min-height: 100%; width: max-content; height: max-content; display: flex; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; margin: auto; }
.media-editor-image-wrap { --editor-preview-zoom: 1; --editor-preview-x: 0px; --editor-preview-y: 0px; position: relative; display: inline-block; line-height: 0; overflow: visible; transform-origin: 0 0; }
.media-editor-overlay[data-editor-mode="preview"] .media-editor-stage,
.media-editor-overlay[data-editor-mode="mask"] .media-editor-stage,
.media-editor-overlay[data-editor-mode="brush"] .media-editor-stage,
.media-editor-overlay[data-editor-mode="grid"] .media-editor-stage { overflow: hidden; cursor: grab; background: #101c22; }
.media-editor-overlay[data-editor-mode="preview"] .media-detail-preview-dialog .media-detail-image-stage { background: #ffffff; }
.media-detail-preview-dialog .media-detail-image-stage { width: 100%; height: 100%; background: #ffffff; }
.media-detail-preview-dialog .media-detail-image-stage .media-detail-preview-stage-inner { width: 100%; min-width: 100%; height: 100%; min-height: 100%; }
.media-detail-preview-dialog .media-detail-image-stage .media-editor-image-wrap img { background: #ffffff; border-radius: 8px; }
.media-editor-overlay[data-editor-mode="preview"] .media-editor-stage-inner,
.media-editor-overlay[data-editor-mode="mask"] .media-editor-stage-inner,
.media-editor-overlay[data-editor-mode="brush"] .media-editor-stage-inner,
.media-editor-overlay[data-editor-mode="grid"] .media-editor-stage-inner { min-height: 100%; height: 100%; margin: 0; }
.media-editor-overlay[data-editor-mode="preview"] .media-editor-image-wrap,
.media-editor-overlay[data-editor-mode="mask"] .media-editor-image-wrap,
.media-editor-overlay[data-editor-mode="brush"] .media-editor-image-wrap,
.media-editor-overlay[data-editor-mode="grid"] .media-editor-image-wrap { transform: translate(var(--editor-preview-x), var(--editor-preview-y)) scale(var(--editor-preview-zoom)); transition: transform .12s ease-out; }
.media-editor-stage.panning .media-editor-image-wrap { transition: none; }
.media-editor-image-wrap img { display: block; width: var(--editor-preview-display-w, auto); height: var(--editor-preview-display-h, auto); max-width: min(1520px, calc(100vw - 180px)); max-height: min(920px, calc(100vh - 240px)); object-fit: contain; background: #101c22; border-radius: 10px; }
.media-editor-image-wrap canvas, .media-editor-crop-box, .media-editor-rect-preview, .media-editor-brush-cursor { position: absolute; }
.media-editor-image-wrap canvas { inset: 0; width: 100%; height: 100%; border-radius: 10px; pointer-events: none; opacity: .68; }
.media-editor-overlay[data-editor-mode="mask"] .media-editor-image-wrap canvas { opacity: var(--editor-mask-opacity, .62); mix-blend-mode: normal; }
.media-editor-overlay[data-editor-mode="mask"] .media-editor-image-wrap canvas,
.media-editor-overlay[data-editor-mode="brush"] .media-editor-image-wrap canvas,
.media-editor-overlay[data-editor-mode="grid"] .media-editor-image-wrap canvas { pointer-events: auto; cursor: crosshair; }
.media-editor-overlay[data-editor-mode="brush"] .media-editor-image-wrap canvas { opacity: 1; mix-blend-mode: normal; }
.media-editor-crop-box { display: none; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(15,23,42,.48), 0 12px 30px rgba(15,23,42,.2); border-radius: 8px; cursor: move; box-sizing: border-box; }
.media-editor-overlay[data-editor-mode="crop"] .media-editor-crop-box { display: block; }
.media-editor-crop-box span { position: absolute; z-index: 3; background: #fff; border: 2px solid #3b82f6; border-radius: 4px; }
.media-editor-crop-box [data-crop-handle="n"], .media-editor-crop-box [data-crop-handle="s"] { left: 12px; right: 12px; height: 7px; background: transparent; border: 0; }
.media-editor-crop-box [data-crop-handle="w"], .media-editor-crop-box [data-crop-handle="e"] { top: 12px; bottom: 12px; width: 7px; background: transparent; border: 0; }
.media-editor-crop-box [data-crop-handle="n"] { top: -4px; cursor: ns-resize; }
.media-editor-crop-box [data-crop-handle="s"] { bottom: -4px; cursor: ns-resize; }
.media-editor-crop-box [data-crop-handle="w"] { left: -4px; cursor: ew-resize; }
.media-editor-crop-box [data-crop-handle="e"] { right: -4px; cursor: ew-resize; }
.media-editor-crop-box [data-crop-handle="nw"], .media-editor-crop-box [data-crop-handle="ne"], .media-editor-crop-box [data-crop-handle="sw"], .media-editor-crop-box [data-crop-handle="se"] { width: 14px; height: 14px; }
.media-editor-crop-box [data-crop-handle="nw"] { top: -7px; left: -7px; cursor: nwse-resize; }
.media-editor-crop-box [data-crop-handle="ne"] { top: -7px; right: -7px; cursor: nesw-resize; }
.media-editor-crop-box [data-crop-handle="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; }
.media-editor-crop-box [data-crop-handle="se"] { bottom: -7px; right: -7px; cursor: nwse-resize; }
.media-editor-rect-preview { z-index: 8; display: none; border: 2px dashed #3b82f6; background: rgba(59,130,246,.08); pointer-events: none; }
.media-editor-brush-cursor { z-index: 9; display: none; pointer-events: none; box-sizing: border-box; border: 2px solid #ff2d55; border-radius: 999px; background: rgba(255,45,85,.16); transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 8px 18px rgba(15,23,42,.2); }
.media-editor-brush-cursor::after { content: attr(data-size); position: absolute; left: 50%; top: 100%; margin-top: 7px; transform: translateX(-50%); height: 22px; display: flex; align-items: center; justify-content: center; padding: 0 8px; color: #fff; background: rgba(15,23,42,.86); border-radius: 999px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.media-editor-compare { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; background: #101c22; }
.media-editor-overlay[data-compare-mode="on"] .media-editor-image-wrap { display: none; }
.media-editor-overlay[data-compare-mode="on"] .media-editor-compare { display: flex; }
.media-editor-compare-inner { --editor-preview-zoom: 1; --editor-preview-x: 0px; --editor-preview-y: 0px; --editor-compare-ratio: 1 / 1; --editor-compare-ratio-value: 1; position: relative; width: var(--editor-preview-display-w, min(1520px, calc(100vw - 180px), calc((100vh - 240px) * var(--editor-compare-ratio-value)))); height: var(--editor-preview-display-h, auto); aspect-ratio: var(--editor-compare-ratio); overflow: hidden; line-height: 0; background: #101c22; border-radius: 10px; transform: translate(var(--editor-preview-x), var(--editor-preview-y)) scale(var(--editor-preview-zoom)); transform-origin: 0 0; transition: transform .12s ease-out; }
.media-editor-stage.panning .media-editor-compare-inner { transition: none; }
.media-editor-compare-inner > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: fill; object-position: center center; border-radius: 0; background: #101c22; }
.media-editor-compare-original { position: absolute; inset: 0; overflow: hidden; z-index: 1; border-right: 2px solid rgba(255,255,255,.88); border-radius: 10px; }
.media-editor-compare-original img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; object-position: center center; max-width: none; max-height: none; border-radius: 0; }
.media-editor-compare-slider { position: absolute; inset-block: 0; left: 50%; z-index: 2; width: 2px; display: flex; align-items: center; justify-content: center; background: #fff; cursor: ew-resize; }
.media-editor-compare-slider svg { width: 22px; height: 22px; padding: 4px; color: #14252a; background: #fff; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.media-editor-fullscreen-button { color: #127d76; background: #e6f8f5; border-color: rgba(30,158,170,.24); }
.media-editor-fullscreen-button:hover { color: #0c5854; background: #d8f2ef; border-color: rgba(30,158,170,.42); }
.media-editor-fullscreen-viewer { position: fixed; inset: 0; z-index: 140; overflow: hidden; background: #050809; box-sizing: border-box; }
.media-editor-fullscreen-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; }
.media-editor-fullscreen-stage.is-zoomed { cursor: grab; }
.media-editor-fullscreen-stage.is-dragging { cursor: grabbing; }
.media-editor-fullscreen-surface { --media-fullscreen-zoom: 1; --media-fullscreen-x: 0px; --media-fullscreen-y: 0px; position: absolute; left: 50%; top: 50%; overflow: hidden; transform: translate(-50%, -50%) translate3d(var(--media-fullscreen-x), var(--media-fullscreen-y), 0) scale(var(--media-fullscreen-zoom)); transform-origin: center center; will-change: transform; }
.media-editor-fullscreen-surface > img,
.media-editor-fullscreen-original,
.media-editor-fullscreen-original img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: fill; object-position: center; }
.media-editor-fullscreen-original { z-index: 1; display: none; overflow: hidden; }
.media-editor-fullscreen-viewer.is-compare .media-editor-fullscreen-original { display: block; }
.media-editor-fullscreen-compare-slider { position: absolute; z-index: 3; display: none; width: 2px; min-height: 1px; background: #ffffff; transform: translateX(-50%); cursor: ew-resize; touch-action: none; box-shadow: 0 0 0 1px rgba(5,8,9,.34); }
.media-editor-fullscreen-viewer.is-compare .media-editor-fullscreen-compare-slider { display: block; }
.media-editor-fullscreen-compare-slider::before { content: ""; position: absolute; inset: 0 -12px; }
.media-editor-fullscreen-compare-slider svg { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; padding: 5px; color: #14252a; background: #ffffff; border-radius: 999px; transform: translate(-50%, -50%); box-shadow: 0 8px 24px rgba(0,0,0,.32); }
.media-editor-fullscreen-toolbar { position: fixed; top: 18px; right: 18px; z-index: 4; height: 40px; display: flex; align-items: center; gap: 4px; padding: 4px; color: #d9f6f2; background: rgba(8,22,24,.78); border: 1px solid rgba(217,246,242,.18); border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.26); backdrop-filter: blur(10px); }
.media-editor-fullscreen-toolbar .icon-button { color: #d9f6f2; background: transparent; border-color: transparent; }
.media-editor-fullscreen-toolbar .icon-button:hover,
.media-editor-fullscreen-toolbar .icon-button.active { color: #ffffff; background: rgba(18,125,118,.86); border-color: rgba(217,246,242,.24); }
.media-editor-fullscreen-toolbar .icon-button:disabled { opacity: .34; cursor: default; }
.media-editor-fullscreen-zoom-value { width: 58px; height: 30px; padding: 0 6px; color: #e8f5f3; background: transparent; border: 0; border-radius: 4px; font-size: 11px; font-weight: 850; cursor: pointer; }
.media-editor-fullscreen-zoom-value:hover { color: #ffffff; background: rgba(255,255,255,.1); }
.media-editor-fullscreen-toolbar-divider { width: 1px; height: 20px; margin: 0 2px; background: rgba(217,246,242,.2); }
.media-editor-fullscreen-close { color: #d9f6f2; }
.media-editor-footer { min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; background: #fff; border-top: 1px solid var(--line); }
.media-editor-ratio-row { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.media-editor-ratio { height: 30px; min-width: 54px; padding: 0 12px; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; font-size: 11px; font-weight: 850; cursor: pointer; }
.media-editor-ratio:hover, .media-editor-ratio.active { color: #fff; background: #14252a; border-color: #14252a; }
.media-editor-check input { width: 14px; height: 14px; accent-color: #14252a; }
.media-editor-controls select { height: 30px; padding: 0 10px; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; font-size: 11px; font-weight: 850; }
.media-editor-zoom { height: 28px; display: inline-flex; align-items: center; padding: 0 4px; color: #94a3b8; font-size: 11px; font-weight: 900; cursor: pointer; user-select: none; }
.media-editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
.media-editor-action { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 999px; font-size: 11px; font-weight: 850; cursor: pointer; }
.media-editor-action.secondary { color: #64748b; background: #f8fafc; border: 1px solid #edf2f7; }
.media-editor-action.primary { color: #fff; background: #14252a; border: 1px solid #14252a; }
.media-editor-action svg { width: 14px; height: 14px; }
.media-editor-subtle { color: var(--muted); font-size: 10px; font-weight: 850; white-space: nowrap; }
.media-editor-grid-regular.hidden, .media-editor-grid-custom.hidden, .media-editor-check.hidden { display: none; }
.media-output-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)); grid-auto-rows: auto; align-content: start; gap: 6px; padding: 6px; background: #101c22; box-sizing: border-box; overflow: auto; }
.media-output-grid figure { position: relative; min-width: 0; min-height: 0; aspect-ratio: var(--output-tile-aspect, 1 / 1); margin: 0; overflow: hidden; background: #0f172a; border-radius: 6px; }
.media-output-grid img { width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; border-radius: 6px; cursor: grab; }
.media-output-grid img:active { cursor: grabbing; }
.media-output-export { position: absolute; right: 7px; top: 7px; z-index: 14; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: #344252; background: rgba(255,255,255,.94); border: 1px solid rgba(226,232,240,.88); border-radius: 999px; box-shadow: 0 10px 24px rgba(15,23,42,.16); cursor: pointer; transition: transform .14s ease, background .14s ease, color .14s ease; }
.media-output-export:hover { color: #102027; background: #fff; transform: translateY(-1px); }
.media-output-export:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.media-output-export svg { width: 16px; height: 16px; }
.output-node-header-actions { min-width: 0; flex: 0 0 auto !important; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 4px; margin-left: auto; }
.output-seam-repair-button { width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0; color: #1d7f87; background: #e9f8f7; border: 1px solid rgba(30,158,170,.28); border-radius: 6px; cursor: pointer; }
.output-seam-repair-button:hover { color: #ffffff; background: #1e9eaa; border-color: #1e9eaa; }
.output-seam-repair-button svg { width: 13px; height: 13px; }

/* Output group seam-repair editor. The composite canvas keeps source pixels;
   only its CSS box is scaled for the preview. */
.seam-repair-overlay { z-index: 110; }
.seam-repair-dialog { width: min(1540px, calc(100vw - 40px)); height: min(940px, calc(100vh - 40px)); max-width: none; max-height: none; }
.seam-repair-head { flex: 0 0 auto; }
.seam-repair-head .media-editor-titlebar { flex: 0 0 260px; }
.seam-repair-toolbar { min-width: 0; flex: 1 1 auto; display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 5px; overflow-x: auto; }
.seam-repair-toolbar .media-editor-chip { flex: 0 0 auto; }
.seam-repair-body { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr) 250px; gap: 0; overflow: hidden; background: #eef4f4; }
.seam-layer-panel, .seam-controls { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fbfdfd; }
.seam-layer-panel { border-right: 1px solid var(--line); }
.seam-controls { border-left: 1px solid var(--line); }
.seam-panel-title { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); }
.seam-panel-title strong { font-size: 11px; font-weight: 900; }
.seam-panel-title span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.seam-layer-list { min-height: 0; display: flex; flex-direction: column; gap: 5px; overflow: auto; padding-right: 2px; }
.seam-layer-row { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) 14px; align-items: center; gap: 7px; min-height: 52px; padding: 6px; color: var(--muted); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; cursor: pointer; text-align: left; }
.seam-layer-row:hover, .seam-layer-row.active { color: var(--ink); border-color: rgba(30,158,170,.46); background: #eef9f8; }
.seam-layer-thumb { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; background: #eef4f4; border: 1px solid var(--soft-line); border-radius: 5px; }
.seam-layer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.seam-layer-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.seam-layer-copy strong, .seam-layer-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seam-layer-copy strong { color: inherit; font-size: 9px; font-weight: 850; }
.seam-layer-copy small { color: var(--muted); font-size: 8px; }
.seam-layer-state { width: 12px; height: 12px; color: #82a0a3; }
.seam-stage-shell { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #17262d; }
.seam-stage { position: relative; min-width: 0; min-height: 0; flex: 1 1 auto; overflow: hidden; background-color: #253940; background-image: linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.035) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.035) 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; cursor: crosshair; }
.seam-stage.panning { cursor: grabbing; }
.seam-stage canvas { position: absolute; display: block; max-width: none; max-height: none; transform-origin: 0 0; }
.seam-stage [data-seam-overlay] { pointer-events: none; }
.seam-brush-cursor { position: absolute; z-index: 4; display: block; pointer-events: none; box-sizing: border-box; border: 2px solid #ff2d55; background: rgba(255,45,85,.12); transform: translate(-50%, -50%); }
.seam-brush-cursor::after { content: attr(data-size); position: absolute; left: 50%; top: 100%; margin-top: 7px; min-width: max-content; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 6px; color: #ffffff; background: rgba(15,23,42,.86); border-radius: 4px; font-size: 9px; font-weight: 850; transform: translateX(-50%); }
.seam-brush-cursor[hidden] { display: none; }
.seam-stage-hint { position: absolute; left: 50%; bottom: 14px; z-index: 2; max-width: calc(100% - 28px); padding: 5px 8px; color: rgba(235,250,250,.86); background: rgba(18,35,42,.72); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; font-size: 9px; font-weight: 750; pointer-events: none; transform: translateX(-50%); }
.seam-stage-status { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; color: #b9d4d5; background: #15272e; border-top: 1px solid rgba(255,255,255,.1); font-size: 8px; }
.seam-stage-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seam-stage-status strong { flex: 0 0 auto; color: #e4f5f4; font-size: 9px; }
.seam-control-group { display: grid; gap: 6px; padding: 8px; background: #f5faf9; border: 1px solid var(--soft-line); border-radius: 6px; }
.seam-control-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 800; }
.seam-control-label strong { color: var(--ink); }
.seam-segment { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.seam-segment button { min-width: 0; height: 26px; padding: 0 4px; color: var(--muted); background: #ffffff; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; }
.seam-segment button:hover, .seam-segment button.active { color: #0f6872; background: #e8f7f6; border-color: rgba(30,158,170,.46); }
.seam-range-row { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.seam-range-row span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seam-range-row strong { color: var(--ink); }
.seam-range-row input { width: 100%; accent-color: var(--cyan); }
.seam-control-actions { display: grid; gap: 5px; padding-top: 4px; border-top: 1px solid var(--soft-line); }
.seam-control-actions .media-editor-chip { justify-content: flex-start; }
.seam-control-note { padding: 8px; color: var(--muted); background: #f7fbfb; border: 1px dashed var(--soft-line); border-radius: 6px; font-size: 8px; line-height: 1.5; }
.seam-empty { padding: 14px 8px; color: var(--muted); font-size: 9px; text-align: center; }
.seam-repair-footer { grid-template-columns: minmax(0, 1fr) auto; }
.seam-history-actions { min-width: 0; display: inline-flex; align-items: center; gap: 5px; }
.seam-history-actions .media-editor-chip { width: 28px; min-width: 28px; padding: 0; }
.seam-history-actions > span { margin-left: 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
.seam-repair-footer .media-editor-actions { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
  .seam-repair-body { grid-template-columns: 170px minmax(0, 1fr); }
  .seam-controls { position: absolute; right: 20px; top: 92px; bottom: 74px; z-index: 5; width: 238px; max-width: calc(100% - 210px); overflow: auto; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 14px 36px rgba(20,35,40,.18); }
  .seam-repair-head .media-editor-titlebar { flex-basis: 200px; }
}
@media (max-width: 620px) {
  .seam-repair-dialog { width: calc(100vw - 20px); height: calc(100vh - 20px); }
  .seam-repair-body { grid-template-columns: 1fr; }
  .seam-layer-panel { max-height: 150px; border-right: 0; border-bottom: 1px solid var(--line); }
  .seam-layer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seam-repair-toolbar { justify-content: flex-start; }
  .seam-repair-head .media-editor-titlebar { display: none; }
  .seam-controls { top: auto; right: 10px; bottom: 68px; left: 10px; width: auto; max-width: none; max-height: 46vh; }
}
.media-long-edge-overlay { position: fixed; inset: 0; z-index: 103; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(22,35,40,.38); backdrop-filter: blur(6px); }
.media-long-edge-dialog { width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: rgba(255,255,255,.98); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 70px rgba(31,52,59,.2); }
.media-long-edge-dialog header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); }
.media-long-edge-dialog header div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.media-long-edge-dialog header strong { color: var(--ink); font-size: 13px; font-weight: 900; }
.media-long-edge-dialog header small { color: var(--muted); font-size: 9px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-long-edge-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.media-long-edge-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.media-long-edge-field span { color: var(--muted); font-size: 10px; font-weight: 850; }
.media-long-edge-field input { width: 100%; height: 34px; padding: 0 10px; color: var(--ink); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; font: inherit; font-size: 13px; font-weight: 800; box-sizing: border-box; }
.media-long-edge-readout { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-long-edge-readout span { color: var(--muted); font-size: 10px; font-weight: 850; }
.media-long-edge-readout strong { color: var(--ink); font-size: 13px; font-weight: 900; }
.media-long-edge-help { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.media-long-edge-status { min-height: 16px; margin: 0; color: #b24a4a; font-size: 10px; line-height: 1.4; }
.media-long-edge-actions { display: flex; justify-content: flex-end; gap: 8px; }
.media-long-edge-action { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: 6px; font-size: 11px; font-weight: 850; cursor: pointer; }
.media-long-edge-action.secondary { color: #64748b; background: #f8fafc; border: 1px solid #edf2f7; }
.media-long-edge-action.primary { color: #ffffff; background: #14252a; border: 1px solid #14252a; }
.media-long-edge-action:disabled { opacity: .5; cursor: not-allowed; }
.output-cleaner-overlay { position: fixed; inset: 0; z-index: 102; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(22,35,40,.42); backdrop-filter: blur(8px); }
.output-cleaner-dialog { width: min(1040px, calc(100vw - 48px)); max-height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 26px 80px rgba(20,35,40,.26); }
.output-cleaner-dialog header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); }
.output-cleaner-dialog header div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.output-cleaner-dialog header strong { color: var(--ink); font-size: 13px; }
.output-cleaner-dialog header small { color: var(--muted); font-size: 9px; }
.output-cleaner-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f7faf9; }
.output-cleaner-toolbar .outline-button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; }
.output-cleaner-toolbar .outline-button svg { width: 14px; height: 14px; }
.output-cleaner-toolbar .outline-button.danger { color: #b24a4a; border-color: #e4bbbb; }
.output-cleaner-summary { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 800; }
.output-cleaner-list { min-height: 0; overflow: auto; padding: 10px; }
.output-cleaner-row { min-height: 62px; display: grid; grid-template-columns: 28px 58px minmax(0, 1fr) 76px 112px auto; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--soft-line); border-radius: 7px; background: #ffffff; }
.output-cleaner-row + .output-cleaner-row { margin-top: 8px; }
.output-cleaner-row.is-selected { border-color: #9ac4b7; background: #f4fbf8; }
.output-cleaner-select { display: grid; place-items: center; }
.output-cleaner-thumb { width: 58px; height: 46px; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: #101c22; border-radius: 6px; }
.output-cleaner-thumb img, .output-cleaner-thumb video { width: 100%; height: 100%; object-fit: cover; }
.output-cleaner-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.output-cleaner-copy strong, .output-cleaner-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output-cleaner-copy strong { color: var(--ink); font-size: 11px; }
.output-cleaner-copy span { color: var(--muted); font-size: 9px; }
.output-cleaner-size { color: var(--muted); font-size: 10px; font-weight: 800; }
.output-cleaner-status { padding: 5px 7px; border-radius: 999px; text-align: center; font-size: 9px; font-weight: 900; white-space: nowrap; }
.output-cleaner-status.is-safe { color: #087653; background: #e7f7ef; }
.output-cleaner-status.is-referenced { color: #a15c0a; background: #fff6df; }
.output-cleaner-status.is-unarchived { color: #2563a6; background: #eef5ff; }
.output-cleaner-status.is-local { color: #64748b; background: #f1f5f9; }
.output-cleaner-actions { display: flex; gap: 4px; }
.icon-button.danger { color: #b24a4a; }
.icon-button.danger:hover { color: #a33c3c; background: #fff0f0; border-color: #f3c7c7; }
.output-cleaner-state { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 14px; color: var(--muted); font-size: 10px; font-weight: 800; border-bottom: 1px solid var(--line); }
.output-cleaner-state.is-error { color: #a33c3c; background: #fff7f7; }
.output-cleaner-empty { padding: 24px; color: var(--muted); text-align: center; font-size: 10px; }
.trace-overlay { position: fixed; inset: 0; z-index: 101; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(22,35,40,.42); backdrop-filter: blur(8px); }
.trace-dialog { width: min(920px, calc(100vw - 48px)); max-height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 26px 80px rgba(20,35,40,.26); }
.trace-dialog header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); }
.trace-dialog header div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trace-dialog header strong { color: var(--ink); font-size: 13px; }
.trace-dialog header small { color: var(--muted); font-size: 9px; }
.trace-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.trace-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: #f7faf9; }
.trace-summary div { min-width: 0; padding: 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.trace-summary span, .trace-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-summary span { color: var(--muted); font-size: 8px; font-weight: 800; }
.trace-summary strong { margin-top: 4px; color: var(--ink); font-size: 11px; }
.trace-list { min-height: 0; overflow: auto; padding: 10px; }
.trace-row { padding: 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; }
.trace-row + .trace-row { margin-top: 8px; }
.trace-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trace-row-head div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.trace-row-head strong, .trace-row-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-row-head strong { color: var(--ink); font-size: 11px; }
.trace-row-head span, .trace-row-head small { color: var(--muted); font-size: 9px; }
.trace-row-head small { flex: 0 0 auto; font-weight: 800; }
.trace-row-body { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.trace-row-body div { min-width: 0; padding: 7px; background: #f3f7f7; border-radius: 5px; }
.trace-row-body span, .trace-row-body strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-row-body span { color: var(--muted); font-size: 8px; font-weight: 800; }
.trace-row-body strong { margin-top: 3px; color: var(--ink); font-size: 9px; }
.media-lineage-dialog { width: min(1680px, calc(100vw - 56px)); height: min(1060px, calc(100vh - 56px)); max-height: none; }
.media-lineage-dialog header > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.media-lineage-body { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.media-lineage-stage { min-width: 0; min-height: 0; overflow: auto; padding: 24px; background: #f7faf9; }
.media-lineage-flow { min-width: max-content; display: flex; align-items: flex-start; gap: 18px; }
.media-lineage-column { display: flex; flex-direction: column; gap: 14px; }
.media-lineage-arrow { width: 30px; min-height: 144px; display: grid; place-items: center; color: #7c9298; }
.media-lineage-arrow svg { width: 20px; height: 20px; }
.media-lineage-card { width: 216px; min-height: 132px; display: flex; flex-direction: column; gap: 8px; padding: 10px; color: var(--ink); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; box-shadow: 0 10px 26px rgba(15,23,42,.08); }
.media-lineage-card header { min-height: auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 0; border: 0; }
.media-lineage-card header > i, .media-lineage-card header svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--cyan); }
.media-lineage-card header div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.media-lineage-card header strong, .media-lineage-card header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-lineage-card header strong { font-size: 12px; font-weight: 900; }
.media-lineage-card header small { color: var(--muted); font-size: 9px; font-weight: 800; }
.media-lineage-card.edit-step { border-color: rgba(139,92,246,.26); background: #fbfaff; }
.media-lineage-card.result-step { border-color: rgba(30,158,170,.24); }
.media-lineage-card.missing { border-style: dashed; background: #fffaf0; }
.media-lineage-fields { display: grid; gap: 6px; }
.media-lineage-fields div { min-width: 0; padding: 7px; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 5px; }
.media-lineage-fields span, .media-lineage-fields strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-lineage-fields span { color: var(--muted); font-size: 8px; font-weight: 850; }
.media-lineage-fields strong { margin-top: 3px; color: var(--ink); font-size: 10px; }
.media-lineage-thumb { height: 118px; display: grid; place-items: center; overflow: hidden; background: #f3f7f7; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-lineage-thumb img, .media-lineage-thumb video { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-lineage-missing { width: 100%; height: 100%; min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #8a6b26; background: #fffaf0; font-size: 10px; font-weight: 900; }
.media-lineage-missing svg { width: 22px; height: 22px; }
.media-lineage-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #ffffff; border-left: 1px solid var(--line); }
.media-lineage-side div { min-width: 0; padding: 10px; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 6px; }
.media-lineage-side span, .media-lineage-side strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-lineage-side span { color: var(--muted); font-size: 9px; font-weight: 850; }
.media-lineage-side strong { margin-top: 4px; color: var(--ink); font-size: 12px; }
.media-lineage-replay { width: 100%; min-height: 36px; margin-top: auto; justify-content: center; }
.trace-prompt { max-height: 78px; margin: 8px 0 0; overflow: auto; color: #506169; font-size: 10px; line-height: 1.5; white-space: pre-wrap; }
.trace-output-list { display: flex; gap: 5px; margin-top: 8px; overflow-x: auto; }
.trace-output-thumb { width: 52px; height: 42px; flex: 0 0 auto; padding: 0; overflow: hidden; background: #101c22; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.trace-output-thumb img, .trace-output-thumb video { width: 100%; height: 100%; object-fit: cover; }
.trace-error { margin-top: 8px; padding: 8px; color: #a33c3c; background: #fff0f0; border-radius: 6px; font-size: 10px; }
.trace-empty { padding: 28px; color: var(--muted); text-align: center; font-size: 10px; }
.shortcut-overlay, .backend-log-overlay, .backend-console-overlay { position: fixed; inset: 0; z-index: 108; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(22,35,40,.28); backdrop-filter: blur(5px); }
.shortcut-dialog, .backend-log-dialog, .backend-console-dialog { width: min(390px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 70px rgba(31,52,59,.2); }
.backend-log-dialog { width: min(1960px, calc(100vw - 32px)); height: min(1080px, calc(100vh - 32px)); max-height: none; }
.backend-console-dialog { width: min(1960px, calc(100vw - 32px)); height: min(1080px, calc(100vh - 32px)); max-height: none; }
.shortcut-dialog header, .backend-log-dialog header, .backend-console-dialog header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); }
.shortcut-dialog header div, .backend-dialog-title, .backend-dialog-title-row { min-width: 0; display: flex; align-items: center; gap: 8px; }
.backend-dialog-title { flex-direction: column; align-items: flex-start; gap: 3px; }
.backend-dialog-title-row svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink); }
.backend-log-dialog header .backend-log-head-actions, .backend-console-dialog header .backend-log-head-actions { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 7px; }
.shortcut-dialog header strong { font-size: 13px; }
.backend-dialog-title-row strong { font-size: 16px; line-height: 1.1; }
.backend-log-dialog header small, .backend-console-dialog header small { max-width: 720px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-list, .backend-log-list { min-height: 0; overflow: auto; padding: 10px 12px 12px; }
.backend-generation-logs { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; background: #f8fbfb; }
.backend-generation-logs .backend-log-list { flex: 1 1 auto; padding: 12px; }
.backend-section-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #ffffff; }
.backend-section-head div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.backend-section-head strong { color: var(--ink); font-size: 14px; }
.backend-section-head span, .backend-section-head small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.backend-section-head small { flex: 0 0 auto; font-weight: 850; }
.backend-runtime-panel { flex: 0 0 auto; border-top: 1px solid var(--line); background: #ffffff; }
.backend-runtime-panel summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 900; list-style: none; }
.backend-runtime-panel summary::-webkit-details-marker { display: none; }
.backend-runtime-panel summary small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.backend-runtime-panel summary::before { content: ""; width: 0; height: 0; flex: 0 0 auto; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #7f9298; transition: transform .16s var(--ease); }
.backend-runtime-panel[open] summary::before { transform: rotate(90deg); }
.backend-runtime-panel[open] { max-height: min(470px, 44vh); display: flex; flex-direction: column; }
.backend-runtime-logs { min-height: 0; flex: 1 1 auto; max-height: none; overflow: auto; padding: 10px 12px; background: #fbfdfd; user-select: text; }
.backend-runtime-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--ink); }
.backend-runtime-head strong { font-size: 12px; }
.backend-runtime-head span { color: var(--muted); font-size: 10px; font-weight: 850; }
.backend-runtime-log { min-width: 0; overflow: hidden; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; }
.backend-runtime-log + .backend-runtime-log { margin-top: 8px; }
.backend-runtime-log > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--soft-line); }
.backend-runtime-log strong { color: var(--ink); font-size: 12px; }
.backend-runtime-log span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.backend-runtime-log pre { max-height: min(420px, 48vh); margin: 0; overflow: auto; padding: 10px; color: #d6e7ee; background: #0f172a; font-family: Consolas, "SFMono-Regular", monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.backend-console-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: #f7faf9; }
.backend-console-meta div { min-width: 0; padding: 9px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; }
.backend-console-meta span, .backend-console-meta strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backend-console-meta span { color: var(--muted); font-size: 10px; font-weight: 900; }
.backend-console-meta strong { margin-top: 4px; color: var(--ink); font-size: 12px; }
.backend-console-terminal { min-height: 0; flex: 1 1 auto; margin: 0; overflow: auto; padding: 14px 16px; color: #d6e7ee; background: #101923; font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; user-select: text; }
.shortcut-row { min-height: 38px; display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 10px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 8px; }
.shortcut-row + .shortcut-row { margin-top: 7px; }
.shortcut-row span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.shortcut-row kbd { min-width: 35px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; color: #24373d; background: #ffffff; border: 1px solid #d8e3e5; border-bottom-color: #bdcdd0; border-radius: 7px; box-shadow: 0 1px 1px rgba(31,52,59,.08); font-size: 9px; font-weight: 900; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.shortcut-row strong { min-width: 0; overflow: hidden; color: #607178; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.backend-log-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: #f7faf9; }
.backend-log-status div { min-width: 0; padding: 9px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; }
.backend-log-status span, .backend-log-status strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backend-log-status span { color: var(--muted); font-size: 10px; font-weight: 900; }
.backend-log-status strong { margin-top: 4px; color: var(--ink); font-size: 12px; }
.generation-log-card { min-height: 94px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 8px; }
.generation-log-card + .generation-log-card { margin-top: 10px; }
.generation-log-card.failed { border-color: rgba(189,76,90,.28); background: #fff8f9; }
.generation-log-copy { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.generation-log-badges { min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.generation-log-badges span { max-width: 360px; height: 25px; display: inline-flex; align-items: center; padding: 0 10px; overflow: hidden; color: #587178; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 999px; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.generation-log-status.success { color: #17764d; background: #eaf8f0; border-color: rgba(41,145,91,.28); }
.generation-log-status.failed { color: #9b3e49; background: #fff0f2; border-color: rgba(189,76,90,.28); }
.generation-log-meta { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #82959b; font-size: 12px; font-weight: 850; }
.generation-log-meta strong { color: #71868c; font-size: 12px; }
.generation-log-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.generation-log-copy p { max-height: 48px; margin: 0; overflow: hidden; color: #60757a; font-size: 12px; line-height: 1.45; }
.generation-log-thumbs { width: 176px; flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 52px); align-content: start; justify-content: end; gap: 6px; }
.generation-log-thumb { width: 52px; height: 52px; display: block; padding: 0; overflow: hidden; background: #101923; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.generation-log-thumb.static { cursor: default; }
.generation-log-thumb img, .generation-log-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.backend-log-row { position: relative; padding: 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; }
.backend-log-row + .backend-log-row { margin-top: 8px; }
.backend-log-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 52px; }
.backend-log-row strong, .backend-log-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backend-log-row strong { color: var(--ink); font-size: 11px; }
.backend-log-row span, .backend-log-row small { color: var(--muted); font-size: 9px; }
.backend-log-row small { position: absolute; right: 10px; top: 10px; font-weight: 900; }
.backend-log-row p { max-height: 74px; margin: 8px 0 0; overflow: auto; color: #51656a; font-size: 10px; line-height: 1.45; white-space: pre-wrap; }
.backend-log-empty { padding: 28px; color: var(--muted); text-align: center; font-size: 10px; }
.drawer-row-action { margin-left: auto; flex: 0 0 auto; }
.drawer-row-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.asset-trace-dialog .trace-list { padding: 0; }
.asset-trace-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asset-trace-media { min-height: 210px; display: grid; place-items: center; padding: 10px; background: #f7faf9; border-bottom: 1px solid var(--line); }
.asset-trace-media img { max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 6px; background: #ffffff; border: 1px solid var(--soft-line); }
.asset-trace-placeholder { width: 100%; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); background: #ffffff; border: 1px dashed var(--line); border-radius: 7px; }
.asset-trace-placeholder svg { width: 28px; height: 28px; }
.asset-trace-placeholder span { font-size: 10px; font-weight: 800; }
.llm-card-body { display: flex; flex-direction: column; }
.image-placeholder { height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8ca1a5; background: #e9f1f1; }
.image-placeholder svg { width: 30px; height: 30px; color: #70a9ad; stroke-width: 1.4; }
.image-placeholder span { font-size: 10px; }
.image-node-footer { justify-content: space-between; padding: 10px 12px; }
.image-node-footer div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.connection-layer { position: absolute; inset: 0; z-index: 1; width: 6000px; height: 4000px; overflow: visible; pointer-events: none; }
.connection-focus-layer { position: absolute; inset: 0; z-index: 6; width: 6000px; height: 4000px; overflow: visible; pointer-events: none; }
.canvas-connection { fill: none; stroke: #84bdbe; stroke-width: 2.5; stroke-linecap: round; opacity: .72; pointer-events: none; }
.canvas-connection.focus { stroke: #84bdbe; stroke-width: 2.5; opacity: .72; }
.canvas-connection.temp { stroke: #1e9eaa; stroke-dasharray: 6 6; opacity: .9; }
.canvas-connection.knife-pending { stroke: #ef4444; opacity: .92; filter: drop-shadow(0 0 3px rgba(239,68,68,.28)); }
.canvas-connection.knife-trail { stroke: #ef4444; stroke-width: 2.4; stroke-dasharray: 7 6; opacity: .88; filter: drop-shadow(0 0 3px rgba(239,68,68,.28)); }
.canvas-connection-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: default; }
.connection-control-layer { position: absolute; inset: 0; z-index: 7; width: 6000px; height: 4000px; pointer-events: none; }
.connection-cut { position: absolute; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; color: #64748b; background: rgba(255,255,255,.94); border: 1px solid #e2e8f0; border-radius: 999px; box-shadow: 0 8px 20px rgba(15,23,42,.12); cursor: pointer; font-size: 18px; font-weight: 400; line-height: 1; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.88); transition: color .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease), opacity .14s var(--ease), transform .14s var(--ease); }
.connection-cut.highlighted, .connection-cut.hovered, .connection-cut:focus { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.connection-cut svg { width: 13px; height: 13px; }
.connection-cut:hover, .connection-cut:focus { color: #dc2626; background: #fff5f5; border-color: #fecaca; outline: none; transform: translate(-50%, -50%) scale(1.04); }
.node-port { position: absolute; top: 50%; z-index: 5; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: crosshair; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .14s ease; }
.node-port::after { content: ""; position: absolute; left: 15px; top: 15px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #ffffff; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1px rgba(55,85,92,.35); transition: transform .14s var(--ease); }
.node-port-in { left: -22px; color: #4d8cf5; }
.node-port-out { right: -22px; color: #1e9eaa; }
.canvas-node:hover > .node-port, .canvas-node.selected > .node-port, .canvas-node:focus-within > .node-port, .node-port.connecting, body.canvas-connecting .canvas-node > .node-port { opacity: 1; pointer-events: auto; }
.node-port:hover::after, .node-port.connecting::after { transform: scale(1.25); }
.canvas-connecting, .canvas-connecting * { cursor: crosshair !important; }
.canvas-controls { position: absolute; right: 24px; bottom: 48px; z-index: 9; display: flex; align-items: center; gap: 3px; padding: 4px; background: rgba(255,255,255,.93); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 20px rgba(31,52,59,.08); pointer-events: auto; }
.canvas-zoom-value { min-width: 44px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: text; font: inherit; font-size: 10px; font-weight: 800; line-height: 1; text-align: center; }
.canvas-zoom-value:hover, .canvas-zoom-value:focus-visible { color: var(--ink); background: #eef4f4; outline: none; }
.canvas-zoom-input { width: 58px; height: 32px; min-width: 58px; padding: 0 7px; color: var(--ink); background: #fbfdfd; border: 1px solid rgba(30,158,170,.38); border-radius: 5px; outline: none; font: inherit; font-size: 10px; font-weight: 850; text-align: center; box-shadow: inset 0 0 0 1px rgba(30,158,170,.08); }
.canvas-zoom-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.12); }
.canvas-zoom-input.invalid { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.12); }
.canvas-controls .toolbar-divider { width: 1px; min-width: 0; height: 22px; flex: 0 0 1px; margin: 0 3px; background: var(--line); }

.project-center { position: absolute; inset: 0; z-index: 26; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(24,33,39,.28); backdrop-filter: blur(10px); }
.project-center.open { display: flex; }
.project-center.gate-mode { background: var(--canvas); backdrop-filter: none; }
.project-center.gate-mode #closeProjectCenterButton { display: none; }
.project-center.gate-mode .project-center-panel { box-shadow: 0 20px 60px rgba(31,52,59,.12); }
.project-center-panel { width: min(1500px, calc(100vw - 96px)); height: min(860px, calc(100vh - 70px)); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 30px 90px rgba(20,35,40,.26); }
.project-center-head { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.project-center-head h2 { margin: 7px 0 0; color: var(--ink); font-size: 20px; letter-spacing: 0; }
.project-center-actions { display: flex; align-items: center; gap: 8px; }
.center-create-panel { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 300px) auto; align-items: center; gap: 12px; padding: 13px 20px; background: #eef8f7; border-bottom: 1px solid var(--line); }
.center-create-panel.canvas-move-panel { grid-template-columns: minmax(180px, 1fr) minmax(220px, 340px) auto; }
.center-create-panel > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.center-create-panel > div:first-child strong { color: var(--ink); font-size: 12px; }
.center-create-panel > div:first-child small { color: var(--muted); font-size: 9px; }
.center-create-panel input, .center-create-panel select { width: 100%; height: 34px; min-width: 0; padding: 0 10px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 10px; }
.center-create-panel input:focus, .center-create-panel select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.12); }
.center-create-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.canvas-move-panel .center-create-actions .run-button { min-width: 86px; justify-content: center; }
.project-center-body { min-height: 0; flex: 1; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.project-center-rail { min-height: 0; overflow: auto; padding: 14px 12px 16px; background: #f6faf9; border-right: 1px solid var(--line); }
.center-rail-summary { display: flex; flex-direction: column; gap: 4px; padding: 11px 10px; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; }
.center-rail-summary strong { color: var(--ink); font-size: 12px; }
.center-rail-summary small { color: var(--muted); font-size: 9px; }
.center-rail-label { margin: 16px 9px 8px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.center-rail-block { display: flex; flex-direction: column; gap: 5px; }
.center-rail-empty { padding: 10px; color: var(--muted); font-size: 10px; }
.center-scope-button { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 8px 9px; color: #617278; background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; text-align: left; }
.center-scope-button:hover, .center-scope-button.active { color: var(--ink); background: #ffffff; border-color: var(--line); box-shadow: 0 8px 18px rgba(31,52,59,.05); }
.center-scope-button > svg { width: 16px; height: 16px; color: var(--cyan); flex: 0 0 auto; }
.center-scope-button span { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.center-scope-button strong, .center-scope-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center-scope-button strong { font-size: 11px; }
.center-scope-button small { color: var(--muted); font-size: 9px; }
.project-center-main { min-height: 0; overflow: auto; padding: 18px 20px 22px; }
.current-canvas-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 11px 12px; background: #f3f8f8; border: 1px solid var(--line); border-radius: 8px; }
.current-canvas-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #187e88; background: var(--cyan-soft); border-radius: 7px; }
.current-canvas-icon svg { width: 17px; height: 17px; }
.current-canvas-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.current-canvas-copy strong, .current-canvas-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-canvas-copy strong { color: var(--ink); font-size: 13px; }
.current-canvas-copy small { color: var(--muted); font-size: 10px; }
.current-archive-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.current-archive-tools > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.mini-project-target { height: 28px; padding: 0 9px; color: #557176; background: #ffffff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 800; }
.mini-project-target:hover { color: var(--ink); border-color: rgba(30,158,170,.45); background: var(--cyan-soft); }
.center-section-head, .project-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 18px 0 12px; }
.center-section-head:first-child, .project-detail-head:first-child { margin-top: 0; }
.center-section-head.compact { margin-top: 18px; }
.center-section-head h3, .project-detail-head h3 { margin: 6px 0 0; color: var(--ink); font-size: 16px; letter-spacing: 0; }
.center-section-head p, .project-detail-head p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.project-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.project-list-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.project-batch-toolbar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 8px 10px; background: #f5faf9; border: 1px solid rgba(30,158,170,.22); border-radius: 7px; }
.project-batch-toolbar > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.project-batch-toolbar strong { color: var(--ink); font-size: 12px; }
.project-batch-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.outline-button.danger { color: #9b3e49; border-color: rgba(189,76,90,.3); background: #fff7f8; }
.outline-button.danger:hover { color: #7f2732; border-color: rgba(189,76,90,.48); background: #ffecef; }
.outline-button:disabled, .icon-button:disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
.project-sort-control { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 9px; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; }
.project-sort-control span { color: var(--muted); font-size: 9px; font-weight: 800; }
.project-sort-control select { min-width: 94px; height: 26px; padding: 0 6px; color: var(--ink); background: transparent; border: 0; outline: none; font-size: 10px; font-weight: 800; }
.project-dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.project-stat-pill { min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; }
.project-stat-pill svg { width: 15px; height: 15px; color: var(--cyan); flex: 0 0 auto; }
.project-stat-pill span { color: var(--muted); font-size: 9px; font-weight: 800; }
.project-stat-pill strong { margin-left: auto; color: var(--ink); font-size: 14px; }
.project-overview-list { display: flex; flex-direction: column; gap: 5px; }
.project-overview-card { min-width: 0; padding: 0 6px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.project-overview-card.expanded { border-color: rgba(30,158,170,.28); background: #fbfdfd; }
.project-create-card { border-color: rgba(30,158,170,.34); background: #f8fcfc; }
.project-overview-top { height: 34px; min-height: 34px; display: flex; align-items: center; gap: 5px; }
.project-overview-title { min-width: 0; height: 34px; min-height: 34px; flex: 1; display: flex; align-items: center; gap: 6px; padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; text-align: left; }
.project-overview-title:hover .folder-card-copy strong { color: #147b85; }
.project-card-chevron { width: 12px; height: 12px; color: var(--muted); flex: 0 0 auto; transition: transform .18s var(--ease); }
.project-overview-card.expanded > .project-overview-top .project-card-chevron,
.project-folder-group.expanded > .project-folder-row .project-card-chevron { transform: rotate(180deg); }
.project-inline-name { width: min(260px, 100%); height: 20px; padding: 0 2px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(30,158,170,.42); outline: none; font-size: 11px; font-weight: 800; }
.project-inline-name:focus { border-bottom-color: var(--cyan); box-shadow: 0 3px 0 rgba(30,158,170,.1); }
.folder-card-icon { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; color: #1b858b; background: var(--cyan-soft); border-radius: 5px; }
.folder-card-icon svg { width: 12px; height: 12px; }
.folder-card-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.folder-card-copy strong, .folder-card-copy span, .folder-card-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-card-copy strong { color: var(--ink); font-size: 12px; line-height: 1.1; }
.folder-card-copy span, .folder-card-copy small { color: var(--muted); font-size: 9px; line-height: 1.1; }
.folder-card-actions { display: flex; align-items: center; gap: 1.5px; flex: 0 0 auto; }
.folder-card-copy.project-tree-copy,
.center-canvas-copy.project-tree-copy { flex-direction: row; align-items: center; gap: 10px; }
.project-tree-copy strong { flex: 1 1 auto; max-width: none; }
.project-tree-copy span, .project-tree-copy small { flex: 0 0 clamp(340px, 46%, 500px); max-width: clamp(340px, 46%, 500px); min-width: 0; margin-left: auto; text-align: right; }
.project-folder-list { margin: 3px 0 0 14px; padding: 3px 0 0 6px; border-left: 1px solid var(--soft-line); display: flex; flex-direction: column; gap: 3px; }
.project-folder-group { min-width: 0; }
.project-folder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.project-folder-main { min-width: 0; height: 36px; min-height: 36px; display: flex; align-items: center; gap: 6px; padding: 3px 6px; color: inherit; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 6px; cursor: pointer; text-align: left; }
.project-folder-main:hover { border-color: rgba(30,158,170,.4); background: #f2f8f8; }
.project-folder-canvas-list { margin: 3px 0 0 11px; display: flex; flex-direction: column; gap: 3px; }
.project-root-canvas-list { display: flex; flex-direction: column; gap: 3px; }
.project-canvas-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.project-canvas-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.project-canvas-row.batch-row { grid-template-columns: 28px minmax(0, 1fr) auto; cursor: pointer; }
.project-canvas-row.batch-selected .project-canvas-main { border-color: rgba(30,158,170,.58); background: #eef8f8; }
.batch-check { width: 24px; height: 36px; display: grid; place-items: center; cursor: pointer; }
.batch-check input { position: absolute; opacity: 0; pointer-events: none; }
.batch-check span { width: 20px; height: 20px; display: grid; place-items: center; color: #7b8f94; background: #ffffff; border: 1px solid var(--line); border-radius: 5px; }
.batch-selected .batch-check span { color: #147b85; border-color: rgba(30,158,170,.5); background: var(--cyan-soft); }
.batch-check svg { width: 12px; height: 12px; stroke-width: 2.2; }
.project-canvas-row.compact .project-canvas-main { height: 36px; min-height: 36px; background: #ffffff; }
.project-canvas-row.compact .center-canvas-count { display: none; }
.project-canvas-main { min-width: 0; height: 36px; min-height: 36px; display: flex; align-items: center; gap: 6px; padding: 3px 6px; color: inherit; background: #f9fbfb; border: 1px solid var(--soft-line); border-radius: 6px; cursor: pointer; text-align: left; }
.project-canvas-main:disabled { cursor: default; opacity: .82; }
.project-canvas-main:hover, .project-canvas-row.active .project-canvas-main { border-color: rgba(30,158,170,.45); background: #f2f8f8; }
.center-canvas-actions { display: flex; align-items: center; gap: 1.5px; padding: 0; }
.folder-card-actions .icon-button.tiny,
.center-canvas-actions .icon-button.tiny { width: 24px; height: 24px; }
.folder-card-actions .icon-button.tiny svg,
.center-canvas-actions .icon-button.tiny svg { width: 12px; height: 12px; }
.center-canvas-actions .canvas-action-spacer { width: 24px; height: 24px; flex: 0 0 auto; }
.center-canvas-icon { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; color: #1b858b; background: var(--cyan-soft); border-radius: 5px; }
.center-canvas-icon svg { width: 12px; height: 12px; }
.center-canvas-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.center-canvas-copy strong, .center-canvas-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center-canvas-copy strong { color: var(--ink); font-size: 12px; line-height: 1.1; }
.center-canvas-copy small { color: var(--muted); font-size: 9px; line-height: 1.1; }
.center-canvas-count { min-width: 22px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: #557176; background: #eef5f5; border: 1px solid var(--soft-line); border-radius: 999px; font-size: 9px; font-weight: 800; }
.center-section-label { margin: 18px 0 8px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.center-empty { padding: 30px; color: var(--muted); background: #f7fbfb; border: 1px dashed var(--line); border-radius: 8px; font-size: 11px; text-align: center; }
.center-empty.inline { padding: 12px; font-size: 10px; text-align: left; }
.draft-summary-list { margin-top: 0; }
.project-center-main-explorer { display: flex; flex-direction: column; overflow: hidden; }
.project-explorer-page { min-width: 0; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.project-explorer-page > .center-section-head { flex: 0 0 auto; }
.project-explorer-shell { min-width: 0; min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(190px, 22%) minmax(250px, 28%) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
.project-explorer-projects, .project-explorer-tree, .project-explorer-content { min-width: 0; min-height: 0; overflow: hidden; }
.project-explorer-projects { background: #fafcfc; border-right: 1px solid var(--line); }
.project-explorer-tree { background: #ffffff; border-right: 1px solid var(--line); }
.project-explorer-projects > header, .project-explorer-tree > header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.project-explorer-projects > header > strong, .project-explorer-tree > header strong, .project-explorer-tree > header small { display: block; }
.project-explorer-projects > header > strong, .project-explorer-tree > header strong { color: var(--ink); font-size: 10px; }
.project-explorer-tree > header small { margin-bottom: 3px; color: var(--muted); font-size: 8px; }
.project-explorer-head-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
.project-explorer-head-actions .icon-button { background: transparent; border-color: transparent; }
.project-explorer-head-actions .icon-button.tiny { width: 24px; height: 24px; }
.project-column-sort { width: 80px; height: 26px; display: inline-grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 1px; padding: 0 3px 0 5px; color: var(--muted); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 5px; }
.project-column-sort > svg { width: 11px; height: 11px; }
.project-column-sort select { width: 58px; min-width: 0; height: 23px; padding: 0 15px 0 2px; color: var(--ink); background-color: transparent; background-position: right 1px center; border: 0; outline: none; font-size: 9px; font-weight: 800; }
.project-explorer-project-list, .project-explorer-directory-list { height: calc(100% - 44px); overflow: auto; }
.project-explorer-project { width: 100%; min-width: 0; min-height: 58px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 13px; align-items: center; gap: 8px; padding: 7px 9px; color: inherit; background: #ffffff; border: 0; border-bottom: 1px solid #e8eeee; cursor: pointer; text-align: left; }
.project-explorer-project:hover, .project-explorer-project.selected { background: #edf7f5; }
.project-explorer-project.selected { box-shadow: inset 3px 0 0 var(--cyan); }
.project-explorer-project-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #25878e; background: var(--cyan-soft); border: 1px solid #d8eaea; border-radius: 7px; }
.project-explorer-project-icon svg { width: 15px; height: 15px; }
.project-explorer-project > span:nth-child(2) { min-width: 0; }
.project-explorer-project strong, .project-explorer-project small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-explorer-project strong { color: var(--ink); font-size: 10px; }
.project-explorer-project small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.project-explorer-project > svg { width: 11px; height: 11px; color: var(--faint); }
.project-explorer-create { min-width: 0; min-height: 50px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 24px 24px; align-items: center; gap: 4px; padding: 6px 7px; background: #f1f9f8; border-bottom: 1px solid rgba(30,158,170,.25); }
.project-explorer-create .project-explorer-project-icon { width: 28px; height: 28px; }
.project-explorer-create .project-inline-name { width: 100%; }
.project-explorer-create .icon-button { width: 24px; height: 24px; }
.project-explorer-directory { border-bottom: 1px solid #edf1f1; }
.project-explorer-directory.selected > .project-explorer-directory-row { background: #eef7f6; box-shadow: inset 3px 0 0 var(--cyan); }
.project-explorer-directory-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 39px; }
.project-explorer-directory-main { width: 100%; min-width: 0; min-height: 39px; display: grid; grid-template-columns: 15px minmax(0, 1fr) 12px; align-items: center; gap: 7px; padding: 0 8px; color: #536970; background: transparent; border: 0; cursor: pointer; text-align: left; }
.project-explorer-directory-main:hover { color: var(--ink); background: #f3f9f8; }
.project-explorer-directory-main svg { width: 13px; height: 13px; color: #26878f; }
.project-explorer-directory-main strong { min-width: 0; overflow: hidden; color: inherit; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.project-explorer-directory-actions { display: flex; align-items: center; gap: 0; padding-right: 5px; }
.project-explorer-directory-actions .icon-button { width: 23px; height: 23px; background: transparent; border-color: transparent; }
.project-explorer-directory-actions .icon-button svg { width: 11px; height: 11px; }
.project-explorer-tree-canvases { padding: 3px 7px 6px 27px; background: #fafcfc; }
.project-explorer-tree-canvas { width: 100%; min-width: 0; height: 28px; display: grid; grid-template-columns: 13px minmax(0, 1fr); align-items: center; gap: 6px; padding: 0 5px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
.project-explorer-tree-canvas:hover, .project-explorer-tree-canvas.active { color: var(--ink); background: #ffffff; }
.project-explorer-tree-canvas svg { width: 11px; height: 11px; color: #4f898e; }
.project-explorer-tree-canvas span { min-width: 0; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.project-explorer-tree-empty { min-height: 28px; display: flex; align-items: center; padding: 0 5px; color: var(--faint); font-size: 8px; }
.project-explorer-content { overflow: auto; padding: 0 13px 13px; background: #ffffff; }
.project-explorer-content-head { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 0 -13px; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.project-explorer-content-title { min-width: 0; }
.project-explorer-content-title small, .project-explorer-content-title strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-explorer-content-title small { margin-bottom: 3px; color: var(--muted); font-size: 8px; }
.project-explorer-content-title strong { color: var(--ink); font-size: 10px; }
.project-explorer-canvas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px; padding-top: 10px; }
.project-explorer-canvas-card { min-width: 0; overflow: hidden; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; }
.project-explorer-canvas-card:hover, .project-explorer-canvas-card.active { border-color: rgba(30,158,170,.44); box-shadow: 0 7px 18px rgba(31,52,59,.07); }
.project-explorer-canvas-preview { position: relative; width: 100%; height: 64px; display: grid; place-items: center; color: #2a858c; background: #f1f7f6; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.project-explorer-canvas-preview > span { width: 34px; height: 34px; display: grid; place-items: center; background: #ffffff; border: 1px solid #d3e3e2; border-radius: 7px; }
.project-explorer-canvas-preview > span svg { width: 16px; height: 16px; }
.project-explorer-canvas-preview > svg { position: absolute; right: 8px; top: 8px; width: 12px; height: 12px; color: var(--muted); opacity: 0; }
.project-explorer-canvas-card:hover .project-explorer-canvas-preview > svg { opacity: 1; }
.project-explorer-canvas-copy { min-width: 0; padding: 6px 7px 4px; }
.project-explorer-canvas-copy strong, .project-explorer-canvas-copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-explorer-canvas-copy strong { color: var(--ink); font-size: 9px; }
.project-explorer-canvas-times { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; margin-top: 4px; }
.project-explorer-canvas-copy .project-explorer-canvas-times small { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px; margin: 0; color: var(--muted); font-size: 7px; }
.project-explorer-canvas-times span, .project-explorer-canvas-times time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-explorer-canvas-times span { color: #6e858a; font-weight: 800; }
.project-explorer-canvas-card footer { min-height: 27px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 2px 4px 3px 7px; }
.project-explorer-canvas-card footer > span { min-height: 17px; display: inline-flex; align-items: center; justify-self: start; padding: 0 5px; color: #436d60; background: #edf7f3; border: 1px solid #d5e8e0; border-radius: 4px; font-size: 7px; font-weight: 850; }
.project-explorer-canvas-card .center-canvas-actions { gap: 0; }
.project-explorer-canvas-card .center-canvas-actions .icon-button { width: 21px; height: 21px; background: transparent; border-color: transparent; }
.project-explorer-content-empty, .project-explorer-empty { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 10px; text-align: center; }
.project-explorer-empty { min-height: 0; flex: 1; flex-direction: column; border: 1px dashed var(--line); border-radius: 7px; }

.drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 15; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -18px 0 46px rgba(31,52,59,.12); transform: translateX(105%); transition: transform .26s var(--ease); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px; border-bottom: 1px solid var(--line); }
.drawer-title-block { min-width: 0; flex: 1 1 auto; }
.drawer-collapse-button { width: 28px; height: 28px; flex: 0 0 auto; display: inline-grid; place-items: center; color: var(--muted); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; cursor: pointer; }
.drawer-collapse-button:hover { color: var(--cyan); border-color: rgba(30,158,170,.38); background: #f5fbfb; }
.drawer-collapse-button svg { width: 14px; height: 14px; }
.drawer-head h2, .page-view-head h1 { margin: 0; color: var(--ink); font-size: 20px; letter-spacing: 0; }
.page-view-head h1 { display: flex; align-items: baseline; gap: 10px; }
.page-view-head h1 span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.drawer-body { overflow: auto; padding: 18px 24px; }
.drawer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: #f3f8f8; border: 1px solid var(--line); border-radius: 7px; }
.drawer-toolbar > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.drawer-toolbar strong { color: var(--ink); font-size: 11px; }
.drawer-toolbar span { color: var(--muted); font-size: 9px; }
.drawer-empty { padding: 24px 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 7px; font-size: 10px; line-height: 1.6; text-align: center; }
.drawer-list { display: flex; flex-direction: column; gap: 8px; }
.asset-drop-target { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; color: #527277; background: #f5fbfb; border: 1px dashed rgba(30,158,170,.38); border-radius: 7px; font-size: 10px; font-weight: 850; transition: color .14s ease, background .14s ease, border-color .14s ease; }
.asset-drop-target.drag-over { color: #123236; background: #e8f8f7; border-color: rgba(30,158,170,.78); }
.asset-drop-target svg { width: 15px; height: 15px; }
.drawer-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; color: inherit; background: var(--paper); border: 1px solid var(--soft-line); border-radius: 7px; text-align: left; }
.drawer-row:hover { background: #f7fbfb; }
.drawer-row.canvas-row.active { border-color: rgba(30,158,170,.45); background: var(--cyan-soft); }
.drawer-row-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #1b858b; background: var(--cyan-soft); border-radius: 5px; }
.drawer-row-icon.amber { color: #aa7420; background: var(--amber-soft); }
.drawer-row-icon svg { width: 16px; height: 16px; }
.drawer-row-text { min-width: 0; flex: 1; }
.drawer-row-text strong, .drawer-row-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-row-text strong { color: var(--ink); font-size: 11px; }
.drawer-row-text span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.drawer-row > small { color: var(--faint); font-size: 9px; }
.drawer-section-label { margin: 20px 0 8px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.project-summary { display: flex; align-items: center; gap: 12px; padding: 14px; background: #f3f8f8; border: 1px solid var(--line); border-radius: 8px; }
.project-summary-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #187e88; background: var(--cyan-soft); border-radius: 7px; }
.project-summary-icon svg { width: 17px; height: 17px; }
.project-summary strong, .project-summary span { display: block; }
.project-summary strong { color: var(--ink); font-size: 12px; }
.project-summary span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.drawer-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.drawer-action-grid .outline-button { width: 100%; }
.asset-section-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 2px; }
.asset-section-tab { min-width: 0; min-height: 42px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 0 10px; color: #52666c; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; cursor: pointer; text-align: left; }
.asset-section-tab:hover, .asset-section-tab.active { color: var(--ink); background: #f4fbfb; border-color: rgba(30,158,170,.36); }
.asset-section-tab svg { width: 15px; height: 15px; color: var(--cyan); }
.asset-section-tab span { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.asset-section-tab small { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; color: #61777c; background: #eef5f5; border-radius: 999px; font-size: 8px; font-weight: 900; }
.asset-section-tab.active small { color: #176d75; background: #dff4f3; }
.drawer[data-drawer-id="assets"] { width: clamp(680px, 50vw, 1050px); max-width: calc(100% - 44px); }
.drawer[data-drawer-id="assets"] .drawer-head { min-height: 42px; align-items: center; gap: 8px; padding: 7px 12px; }
.drawer[data-drawer-id="assets"] .drawer-title-block { display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.drawer[data-drawer-id="assets"] .drawer-head .eyebrow { display: none; }
.drawer[data-drawer-id="assets"] .drawer-head h2 { order: 1; flex: 0 0 auto; margin-top: 0; font-size: 15px; line-height: 1.08; }
.drawer[data-drawer-id="assets"] .drawer-head .icon-button,
.drawer[data-drawer-id="assets"] .drawer-collapse-button { width: 26px; height: 26px; }
.drawer[data-drawer-id="assets"] .drawer-body { min-height: 0; flex: 1 1 auto; padding: 10px 12px 12px; overflow: hidden; }
.asset-floating-panel { position: absolute; z-index: 24; min-width: 460px; min-height: 340px; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid rgba(119, 144, 150, .42); border-radius: 8px; box-shadow: 0 18px 54px rgba(31,52,59,.18); }
.asset-floating-panel.fullscreen { inset: 0 !important; width: auto !important; height: auto !important; border: 0; border-radius: 0; box-shadow: none; }
.asset-floating-panel.is-moving, .asset-floating-panel.is-resizing { user-select: none; }
.asset-floating-head { flex: 0 0 auto; min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #ffffff; border-bottom: 1px solid var(--line); cursor: grab; }
.asset-floating-panel.is-moving .asset-floating-head { cursor: grabbing; }
.asset-floating-head .drawer-title-block { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.asset-floating-head h2 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.08; }
.asset-floating-head .icon-button,
.asset-floating-head .drawer-collapse-button { width: 26px; height: 26px; }
.asset-floating-panel .drawer-body { min-height: 0; flex: 1 1 auto; padding: 10px 12px 12px; overflow: hidden; }
.asset-floating-resize { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; }
.asset-floating-resize::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border-right: 2px solid rgba(85,113,118,.42); border-bottom: 2px solid rgba(85,113,118,.42); }
.asset-floating-panel.fullscreen .asset-floating-resize { display: none; }
.asset-window-page { background: #eef4f4; }
.asset-window-page #app { width: 100%; height: 100vh; }
.asset-window-shell { width: 100%; height: 100vh; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
.asset-window-head { flex: 0 0 auto; min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #ffffff; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; }
.asset-window-head.is-dragging { cursor: grabbing; }
.asset-window-title { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.asset-window-title strong { flex: 0 0 auto; color: var(--ink); font-size: 15px; line-height: 1.08; }
.asset-window-title span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.asset-window-head .icon-button,
.asset-window-head .drawer-collapse-button { width: 26px; height: 26px; cursor: pointer; }
.asset-window-main { min-height: 0; flex: 1 1 auto; overflow: hidden; }
.asset-window-main .drawer-body { height: 100%; min-height: 0; padding: 10px 12px 12px; overflow: hidden; }
.asset-window-parked { width: 100%; height: 100vh; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; color: var(--muted); background: #f5f8f8; text-align: center; }
.asset-window-parked svg { width: 30px; height: 30px; color: var(--cyan); }
.asset-window-parked strong { color: var(--ink); font-size: 14px; }
.asset-window-parked span { max-width: 360px; font-size: 11px; line-height: 1.6; }
.asset-library-panel { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.asset-library-loading { flex: 0 0 auto; min-height: 28px; display: flex; align-items: center; justify-content: center; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; background: #fbfdfd; font-size: 10px; }
.asset-tabs { flex: 0 0 auto; display: flex; gap: 5px; padding: 3px; border-radius: 8px; background: #f3f8f8; border: 1px solid var(--line); }
.asset-tab { flex: 1 1 0; min-width: 0; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 850; }
.asset-tab:hover, .asset-tab.active { color: var(--ink); background: #ffffff; box-shadow: 0 1px 0 rgba(31,52,59,.04); }
.asset-tab svg { width: 13px; height: 13px; color: var(--cyan); }
.asset-tab small { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; color: #60747a; background: #eaf2f2; border-radius: 999px; font-size: 8px; font-weight: 900; }
.asset-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; }
.asset-left-bar { width: 168px; flex: 0 0 168px; min-height: 0; padding: 6px; overflow: auto; border-right: 1px solid var(--line); background: #fbfdfd; }
.asset-left-row { min-width: 0; display: flex; align-items: center; gap: 4px; }
.asset-left-row .asset-left-item { width: auto; flex: 1 1 auto; }
.asset-left-item { width: 100%; min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; color: var(--ink); background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left; }
.asset-left-item:hover { background: #f0f7f7; }
.asset-left-item.active { color: #0f4f57; background: #e1f4f3; }
.asset-all-image-resources { min-height: 34px; color: #245d63; background: #f1f8f7; border: 1px solid #dbe9e7; }
.asset-all-image-resources:hover { background: #e9f5f4; }
.asset-all-image-resources.active { background: #d9efed; border-color: #b8d9d6; }
.asset-all-image-resources span { font-size: 10px; }
.asset-left-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; }
.asset-left-item small { flex: 0 0 auto; color: var(--faint); font-size: 9px; font-weight: 850; }
.asset-prompt-rail { display: flex; flex-direction: column; gap: 8px; }
.asset-prompt-group { min-width: 0; }
.asset-prompt-group-head { width: 100%; min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left; }
.asset-prompt-group-head:hover, .asset-prompt-group-head.active { color: var(--ink); background: #edf6f5; }
.asset-prompt-group-head > span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.asset-prompt-group-head svg { width: 14px; height: 14px; color: var(--cyan); }
.asset-prompt-group-head small { color: var(--faint); font-size: 9px; font-weight: 850; }
.asset-prompt-category-list { display: flex; flex-direction: column; gap: 1px; padding: 3px 0 0 20px; }
.asset-prompt-category-list[hidden] { display: none; }
.asset-prompt-category { width: 100%; min-height: 27px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 7px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
.asset-prompt-category:hover { color: var(--ink); background: #f2f8f8; }
.asset-prompt-category.active { color: #0f4f57; background: #e1f4f3; }
.asset-prompt-category span { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.asset-prompt-category small { flex: 0 0 auto; color: var(--faint); font-size: 8px; font-weight: 850; }
.asset-project-rail { display: flex; flex-direction: column; gap: 4px; }
.asset-project-group { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 2px; border-radius: 7px; }
.asset-project-group.active { background: #edf8f7; }
.asset-project-group .asset-left-item { min-height: 28px; }
.asset-project-folder-select { width: calc(100% - 2em); min-width: 0; height: 25px; margin-left: 2em; padding: 0 6px; color: var(--muted); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; outline: none; font: inherit; font-size: 9px; font-weight: 800; }
.asset-project-folder-select:focus { color: var(--ink); border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.asset-left-divider { height: 1px; flex: 0 0 1px; margin: 6px 8px; background: var(--line); }
.asset-indexed-category-row .asset-left-item { min-width: 0; padding-left: 2px; }
.asset-tree-toggle, .asset-tree-toggle-spacer { width: 20px; height: 27px; flex: 0 0 20px; }
.asset-tree-toggle { display: inline-grid; place-items: center; padding: 0; color: #789096; background: transparent; border: 0; border-radius: 5px; cursor: pointer; }
.asset-tree-toggle:hover { color: #0f6872; background: #e8f3f3; }
.asset-tree-toggle:focus-visible { outline: 2px solid rgba(30,158,170,.35); outline-offset: -2px; }
.asset-tree-toggle svg { width: 13px; height: 13px; }
.asset-tree-toggle-spacer { display: block; }
.asset-external-folder-row { min-width: 0; }
.asset-external-folder-row .asset-left-item { min-width: 0; min-height: 27px; justify-content: flex-start; gap: 6px; padding: 0 7px 0 2px; color: var(--muted); }
.asset-external-folder-row .asset-left-item svg { width: 12px; height: 12px; flex: 0 0 12px; color: #729096; }
.asset-external-folder-row .asset-left-item span { flex: 1 1 auto; font-size: 9px; font-weight: 800; }
.asset-external-folder-row .asset-left-item.active { color: #0f4f57; }
.asset-external-folder-row .asset-left-item.active svg { color: var(--cyan); }
.asset-left-add { width: 100%; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 5px; color: var(--muted); background: transparent; border: 1px dashed var(--line); border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 850; }
.asset-left-add:hover { color: var(--ink); border-color: var(--cyan); background: #f4fbfb; }
.asset-left-add svg { width: 12px; height: 12px; }
.asset-right { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow: hidden; }
[data-asset-results] { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.asset-category-row { flex: 0 0 auto; display: grid; grid-template-columns: minmax(240px, 1fr); align-items: stretch; gap: 6px; min-width: 0; }
.asset-category-row.has-drop { grid-template-columns: minmax(240px, .92fr) minmax(260px, 1fr); }
.asset-control-stack { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.asset-icon-row { min-width: 0; min-height: 24px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.asset-sort-control { position: relative; flex: 0 0 auto; }
.asset-mini-btn.is-active { color: #0f6872; border-color: rgba(30,158,170,.55); background: #e8f7f6; }
.asset-sort-menu { position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; min-width: 150px; padding: 4px; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 10px 26px rgba(31,52,59,.14); }
.asset-sort-menu[hidden] { display: none; }
.asset-sort-option { width: 100%; min-height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 7px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; font: inherit; font-size: 10px; font-weight: 800; }
.asset-sort-option:hover, .asset-sort-option.active { color: #0f6872; background: #e8f7f6; }
.asset-sort-option svg:first-child { width: 13px; height: 13px; flex: 0 0 13px; }
.asset-sort-option span { min-width: 0; flex: 1 1 auto; }
.asset-sort-option svg:last-child { width: 13px; height: 13px; flex: 0 0 13px; color: var(--cyan); }
.asset-workflow-category-filter { min-width: 0; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 850; }
.asset-workflow-category-filter span { white-space: nowrap; }
.asset-workflow-category-filter select { min-width: 92px; height: 24px; padding: 0 22px 0 7px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: 9px; font-weight: 800; }
.asset-workflow-category-filter select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.asset-mini-btn { width: 24px; height: 24px; flex: 0 0 auto; display: inline-grid; place-items: center; color: var(--muted); background: #ffffff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.asset-mini-btn:hover { color: var(--ink); border-color: var(--cyan); }
.asset-mini-btn.danger:hover { color: #b42318; border-color: #fecaca; background: #fff7f7; }
.asset-mini-btn:disabled { opacity: .42; cursor: not-allowed; }
.asset-mini-btn svg { width: 13px; height: 13px; }
.asset-search-input { width: 100%; min-width: 0; height: 26px; padding: 0 9px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: 10px; }
.asset-search-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.asset-drop-zone { min-width: 180px; min-height: 56px; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 10px; color: #668186; background: #f5fbfb; border: 1px dashed rgba(30,158,170,.36); border-radius: 7px; font-size: 10px; font-weight: 850; }
.asset-drop-zone.drag-over { color: #123236; border-color: rgba(30,158,170,.78); background: #e8f8f7; }
.asset-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 6px; overflow: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.asset-item { min-width: 0; overflow: hidden; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; cursor: grab; }
.asset-item:hover { border-color: rgba(30,158,170,.42); }
.asset-thumb-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f3f8f8; }
.asset-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-material-icon { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 900; }
.asset-material-icon svg { width: 30px; height: 30px; }
.asset-badges { position: absolute; left: 6px; top: 6px; right: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.asset-badge { min-height: 18px; display: inline-flex; align-items: center; padding: 0 6px; color: #ffffff; background: rgba(15,23,42,.74); border-radius: 6px; font-size: 8px; font-weight: 900; }
.asset-badge-icon { width: 20px; min-height: 20px; justify-content: center; padding: 0; border-radius: 6px; }
.asset-badge-icon svg { width: 12px; height: 12px; }
.asset-project-badge { background: rgba(15,23,42,.78); }
.asset-ai-badge { color: #e9ffff; background: rgba(8,116,127,.84); }
.asset-meta { min-height: 34px; display: flex; align-items: center; gap: 4px; padding: 5px; border-top: 1px solid var(--soft-line); }
.asset-name { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.asset-desc { padding: 0 7px 7px; color: var(--muted); font-size: 9px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.asset-provenance { display: grid; gap: 3px; margin: 0; padding: 0 7px 7px; color: #61757a; font-size: 8px; line-height: 1.35; }
.asset-provenance div { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 5px; }
.asset-provenance dt, .asset-provenance dd { min-width: 0; margin: 0; }
.asset-provenance dt { color: #819195; }
.asset-provenance dd { overflow: hidden; color: #40575c; text-overflow: ellipsis; white-space: nowrap; }
.asset-empty { width: 100%; padding: 28px 10px; color: var(--muted); text-align: center; font-size: 10px; }
.asset-workflow-gallery { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 8px; overflow: auto; padding: 1px 2px 2px 1px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.asset-workflow-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; cursor: grab; }
.asset-workflow-card:hover { border-color: rgba(30,158,170,.48); box-shadow: 0 2px 10px rgba(31,52,59,.06); }
.asset-workflow-preview { position: relative; width: 100%; aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; color: #31594e; background: #edf5f4; border-bottom: 1px solid var(--soft-line); }
.asset-workflow-preview-empty { position: absolute; inset: 0; z-index: 0; display: inline-grid; place-items: center; align-content: center; gap: 6px; color: #4b7775; font-size: 9px; font-weight: 850; }
.asset-workflow-preview-empty svg { width: 28px; height: 28px; }
.asset-workflow-preview-image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; background: #ffffff; }
.asset-workflow-preview-image[hidden] { display: none; }
.asset-workflow-card-body { min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; padding: 8px; }
.asset-workflow-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--faint); font-size: 8px; font-weight: 850; }
.asset-workflow-card-meta > span, .asset-workflow-card-meta > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-workflow-card-meta > span { color: #176d75; }
.asset-workflow-card-meta small { font-size: 8px; font-weight: 800; }
.asset-workflow-card-body strong { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.asset-workflow-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 8px; }
.asset-prompt-gallery { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 8px; overflow: auto; padding: 1px 2px 2px 1px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.prompt-preset-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; }
.prompt-preset-card:hover, .prompt-preset-card.active { border-color: rgba(30,158,170,.48); box-shadow: 0 2px 10px rgba(31,52,59,.06); }
.prompt-preset-preview { position: relative; width: 100%; aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 0; overflow: hidden; background: #ffffff; border: 0; border-bottom: 1px solid var(--soft-line); cursor: pointer; }
.prompt-preset-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; background: #ffffff; }
.prompt-preview-tone-architecture { color: #31594e; background: #e9f2ec; }
.prompt-preview-tone-character { color: #75444d; background: #faeef0; }
.prompt-preview-tone-product { color: #785219; background: #fff4e5; }
.prompt-preview-tone-other { color: #405a6a; background: #edf3f7; }
.prompt-preset-placeholder { display: inline-grid; place-items: center; align-content: center; gap: 6px; font-size: 10px; font-weight: 900; }
.prompt-preset-placeholder svg { width: 26px; height: 26px; }
.prompt-preset-placeholder small { max-width: 148px; color: rgba(49,89,78,.72); font-size: 8px; line-height: 1.35; font-weight: 800; text-align: center; }
.prompt-preset-preview.image-error::after { content: '预览图加载失败'; position: absolute; inset: auto 7px 7px; min-height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; color: #b42318; background: rgba(255,247,247,.92); border: 1px solid #fecaca; border-radius: 6px; font-size: 8px; font-weight: 900; }
.prompt-preset-card-body { min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; padding: 8px; }
.prompt-preset-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--faint); font-size: 8px; font-weight: 850; }
.prompt-preset-card-meta > span { min-width: 0; color: #176d75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompt-preset-card-meta small { min-width: 0; overflow: hidden; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.prompt-preset-card-body strong { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.prompt-preset-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 8px; }
.asset-card-leading-actions, .asset-card-trailing-actions { display: inline-flex; align-items: center; gap: 8px; }
.asset-card-trailing-actions { margin-left: auto; }
.prompt-card-apply { width: 26px; height: 26px; min-width: 26px; min-height: 26px; flex: 0 0 26px; display: inline-grid; place-items: center; padding: 0; color: var(--muted); background: #ffffff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.prompt-card-apply:hover { color: var(--ink); background: #f4fbfb; border-color: var(--cyan); }
.prompt-card-apply:disabled { opacity: .45; cursor: not-allowed; }
.prompt-card-apply svg { width: 13px; height: 13px; }
.asset-card-category { min-width: 0; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; }
.asset-card-category-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 平台共享标记：只放一个图标（悬浮看说明），避免中文标签占用列表宽度。 */
.asset-platform-badge { flex: 0 0 auto; color: var(--cyan); }
.asset-platform-badge svg, .asset-platform-badge i { width: 9px; height: 9px; stroke-width: 2.4; }
.asset-card-info { width: 24px; height: 24px; flex: 0 0 24px; display: inline-grid; place-items: center; color: #5f7b80; border: 1px solid currentColor; border-radius: 3px; cursor: help; font-size: 9px; font-style: normal; font-weight: 900; line-height: 1; }
.asset-card-info:hover { color: var(--cyan); }
.asset-prompt-workspace { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); gap: 8px; overflow: hidden; }
.asset-prompt-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.preset-panel-item { width: 100%; min-height: 48px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 9px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; text-align: left; }
.preset-panel-item:hover, .preset-panel-item.active { border-color: rgba(30,158,170,.42); background: #f4fbfb; }
.preset-panel-item-title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 900; }
.preset-panel-item-desc { width: 100%; color: var(--muted); font-size: 9px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.preset-panel-item small { color: var(--faint); font-size: 8px; font-weight: 800; }
.asset-prompt-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 9px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; overflow: auto; }
.preset-panel-detail-title, .asset-dialog-input { width: 100%; min-height: 30px; padding: 0 9px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: 11px; }
.preset-panel-detail-title { border-color: transparent; background: transparent; padding: 0 2px; font-size: 14px; font-weight: 900; }
.preset-panel-detail-title:focus, .asset-dialog-input:focus, .preset-panel-detail-content:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.prompt-preview-control { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #f8fcfc; border: 1px dashed rgba(30,158,170,.28); border-radius: 8px; }
.prompt-preview-live { position: relative; min-height: 92px; display: grid; place-items: center; overflow: hidden; color: #31594e; background: linear-gradient(135deg, #edf7f4, #f8fbfb); border: 1px solid var(--soft-line); border-radius: 7px; }
.prompt-preview-live.has-image { background: #ffffff; }
.prompt-preview-live img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #ffffff; }
.prompt-preview-empty { display: inline-grid; place-items: center; align-content: center; gap: 4px; text-align: center; }
.prompt-preview-empty svg { width: 22px; height: 22px; color: var(--cyan); }
.prompt-preview-empty strong { color: var(--ink); font-size: 11px; font-weight: 900; }
.prompt-preview-empty small { max-width: 210px; color: var(--muted); font-size: 9px; line-height: 1.45; font-weight: 800; }
.prompt-preview-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px 30px; gap: 6px; align-items: center; }
.prompt-preview-input-row .asset-mini-btn { width: 30px; height: 30px; }
.prompt-preview-help, .prompt-preview-error { color: var(--muted); font-size: 9px; line-height: 1.45; }
.prompt-preview-error { color: #b42318; }
.prompt-preview-control.preview-error { border-color: #fecaca; background: #fffafa; }
.workflow-cover-control { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #f8fcfc; border: 1px dashed rgba(30,158,170,.28); border-radius: 8px; }
.workflow-cover-live { position: relative; min-height: 156px; display: grid; place-items: center; overflow: hidden; color: #31594e; background: #edf7f4; border: 1px solid var(--soft-line); border-radius: 7px; }
.workflow-cover-live.has-image { background: #ffffff; }
.workflow-cover-live img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #ffffff; }
.workflow-cover-empty { display: inline-grid; place-items: center; align-content: center; gap: 4px; text-align: center; }
.workflow-cover-empty svg { width: 24px; height: 24px; color: var(--cyan); }
.workflow-cover-empty strong { color: var(--ink); font-size: 11px; font-weight: 900; }
.workflow-cover-empty small { max-width: 220px; color: var(--muted); font-size: 9px; line-height: 1.45; font-weight: 800; }
.workflow-cover-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px 30px; gap: 6px; align-items: center; }
.workflow-cover-input-row .asset-mini-btn { width: 30px; height: 30px; }
.workflow-cover-help, .workflow-cover-error { color: var(--muted); font-size: 9px; line-height: 1.45; }
.workflow-cover-error { color: #b42318; }
.preset-panel-detail-content { flex: 1 1 auto; min-height: 140px; padding: 10px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 7px; outline: none; resize: vertical; font: inherit; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.preset-panel-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding-top: 6px; border-top: 1px solid var(--soft-line); }
.preset-panel-actions button { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 850; }
.preset-panel-actions button.primary { width: max-content; min-width: max-content; flex: 0 0 auto; white-space: nowrap; color: #ffffff; background: var(--cyan); border-color: var(--cyan); }
.preset-panel-actions button.danger { color: #b42318; background: #fff7f7; border-color: #fecaca; margin-left: auto; }
.preset-panel-actions button:disabled { opacity: .45; cursor: not-allowed; }
.preset-panel-actions svg { width: 13px; height: 13px; }
.asset-edit-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.22); }
.asset-edit-dialog { width: min(520px, calc(100vw - 40px)); display: flex; flex-direction: column; gap: 9px; padding: 14px; background: #ffffff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 22px 58px rgba(31,52,59,.18); }
.asset-folder-create-dialog { width: min(420px, calc(100vw - 40px)); }
.asset-edit-dialog header, .asset-edit-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.asset-edit-dialog header strong,
.workflow-save-node-list > .section-label { color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.asset-prompt-edit-dialog header > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.asset-prompt-edit-dialog header span { color: var(--muted); font-size: 9px; font-weight: 800; }
.asset-prompt-dialog-content { min-height: 190px !important; }
.asset-dialog-label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 850; }
.asset-dialog-label[hidden] { display: none; }
.asset-dialog-label span { padding-left: 2px; }
.asset-edit-dialog textarea.asset-dialog-input { min-height: 96px; padding: 9px; resize: vertical; line-height: 1.45; }
.asset-edit-dialog .solid-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; color: #ffffff; background: var(--cyan); border: 1px solid var(--cyan); border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 850; }
.asset-edit-dialog .solid-button svg { width: 13px; height: 13px; }
.workflow-save-dialog { width: min(620px, calc(100vw - 40px)); max-height: min(760px, calc(100vh - 40px)); overflow: auto; }
.workflow-save-summary { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.workflow-save-category-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-items: end; }
.workflow-save-category-row > label:only-child { grid-column: 1 / -1; }
.workflow-save-node-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 9px; background: #f7fafb; border: 1px solid var(--soft-line); border-radius: 6px; }
.workflow-save-node-list > .section-label { grid-column: 1 / -1; }
.workflow-save-node-list > span { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 7px; background: #fff; border: 1px solid var(--soft-line); border-radius: 5px; }
.workflow-save-node-list > span:only-of-type { grid-column: 1 / -1; }
.workflow-save-node-list strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-save-node-list em { color: var(--muted); font-size: 8px; font-style: normal; }
.workflow-save-error { margin: 0; padding: 8px 9px; color: #9f3434; background: #fff5f5; border: 1px solid #ecc5c5; border-radius: 6px; font-size: 9px; font-weight: 800; }
@media (max-width: 680px) {
  .workflow-save-category-row { grid-template-columns: 1fr; }
  .workflow-save-node-list { grid-template-columns: 1fr; }
}
.asset-confirm-overlay { background: rgba(15,23,42,.28); backdrop-filter: blur(1px); }
.asset-confirm-dialog { width: min(380px, calc(100vw - 40px)); display: flex; flex-direction: column; gap: 14px; padding: 14px; background: #ffffff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 22px 58px rgba(31,52,59,.2); }
.asset-confirm-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.asset-confirm-dialog header div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.asset-confirm-dialog header strong { color: var(--ink); font-size: 13px; }
.asset-confirm-dialog header span { color: var(--muted); font-size: 11px; line-height: 1.5; word-break: break-word; }
.asset-confirm-dialog footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.asset-confirm-dialog .solid-button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; color: #ffffff; background: var(--cyan); border: 1px solid var(--cyan); border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 850; }
.asset-confirm-dialog .solid-button.danger { background: #c24135; border-color: #c24135; }
.asset-confirm-dialog .solid-button svg { width: 13px; height: 13px; }
.tag-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-grid span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; color: #557176; background: #f3f8f8; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 700; }

.page-view { position: absolute; inset: 0; z-index: 12; overflow: auto; padding: 42px 7vw; background: var(--canvas); }
/* 设置页：去掉外层 7vw 留白（宽屏下可达 150px+），并清除链路上所有可能的宽度限制 */
.page-view.page-view-settings { padding: 24px 16px; }
.page-view-settings .settings-layout,
.page-view-settings .settings-content,
.page-view-settings .settings-custom-layout,
.page-view-settings .custom-settings-panel,
.page-view-settings .custom-tool-group-grid,
.page-view-settings .settings-list { width: 100%; max-width: none; }
.page-view.page-view-agent { display: flex; flex-direction: column; overflow: hidden; padding: 28px clamp(18px, 2vw, 32px); }
.page-view:is(.page-view-app-center, .page-view-settings, .page-view-knowledge) { display: flex; flex-direction: column; }
.page-view-head { justify-content: space-between; gap: 20px; min-height: 38px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.page-view-head-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.page-view-head p { display: none; }
.page-view-body { padding: 18px 0; }
.page-view.page-view-agent .page-view-body { min-height: 0; flex: 1; display: flex; overflow: hidden; padding: 12px 0 0; }
.page-view:is(.page-view-app-center, .page-view-settings, .page-view-knowledge) .page-view-body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.app-center-page-shell { width: 100%; height: 100%; min-height: 0; overflow: hidden; background: transparent; }
.app-center-page-frame { width: 100%; height: 100%; display: block; background: transparent; border: 0; }
.page-view-app-center .page-view-head-actions { flex: 1 1 auto; }
.app-center-header-tabs { min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(70px, 1fr); gap: 3px; margin-right: auto; padding: 3px; background: #f3f6f6; border: 1px solid var(--line); border-radius: 7px; }
.app-center-header-tabs button { min-width: 0; height: 28px; padding: 0 10px; overflow: hidden; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.app-center-header-tabs button:hover { color: var(--ink); background: #e9efef; }
.app-center-header-tabs button.active { color: var(--ink); background: #ffffff; box-shadow: 0 1px 3px rgba(24, 41, 46, .12); }
.settings-layout { width: 100%; max-width: none; min-height: 100%; display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.settings-overview-layout { width: 100%; max-width: none; }
.settings-overview-layout .settings-content { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.settings-shell-head { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-bottom: 4px; }
.settings-shell-head .eyebrow { color: var(--cyan); }
.settings-shell-head h2 { margin: 7px 0 0; color: var(--ink); font-size: 18px; }
.settings-shell-head p { max-width: 760px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.settings-section-toolbar { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; background: #f7faf9; border: 1px solid var(--line); border-radius: 8px; }
.settings-section-toolbar > .outline-button { flex: 0 0 auto; }
.settings-section-toolbar .settings-tabs { flex: 1 1 auto; min-width: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.settings-tab { width: auto; min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; text-align: left; font-size: 12px; font-weight: 800; }
.settings-tab:hover, .settings-tab.active { color: var(--ink); background: #eef8f7; border-color: rgba(30,158,170,.25); }
.settings-tab svg { width: 14px; height: 14px; color: var(--cyan); }
.settings-content { min-width: 0; }
.settings-overview-editorial-grid { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, 1fr); gap: 14px; align-items: stretch; }
.settings-overview-panel { --panel-accent: var(--cyan); position: relative; min-width: 0; min-height: 250px; display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 18px 19px 17px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; text-align: left; font: inherit; box-shadow: none; transition: border-color .18s, background .18s, transform .18s; }
.settings-overview-panel:hover { background: #fbfdfd; border-color: color-mix(in srgb, var(--panel-accent) 34%, #d7dfdf); transform: translateY(-1px); }
.settings-overview-panel:focus-visible { outline: 2px solid color-mix(in srgb, var(--panel-accent) 42%, transparent); outline-offset: 2px; }
.settings-overview-panel-accent { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--panel-accent); }
.settings-overview-panel-comfy, .settings-overview-panel-api, .settings-overview-panel-storage { grid-column: span 2; }
.settings-overview-panel-comfy { --panel-accent: #d26f5a; min-height: 390px; }
.settings-overview-panel-api { --panel-accent: #587da5; min-height: 390px; }
.settings-overview-panel-storage { --panel-accent: #b58a33; min-height: 320px; }
/* ⚠️ 总览卡片的 body 允许内部滚动：内容比卡片高时**不再被裁掉半截**
   （卡片本身仍是 overflow:hidden，圆角/描边保持不变；只在 body 里滚）。
   只影响「总览」这一页的外观，卡片点进去的页面不受影响。 */
.settings-overview-panel-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.settings-overview-panel-custom { --panel-accent: #776f9f; }
.settings-overview-panel-network { --panel-accent: #4f8b6c; }
.settings-overview-panel-head { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--soft-line); }
.settings-overview-panel-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--panel-accent); background: color-mix(in srgb, var(--panel-accent) 9%, #ffffff); border: 1px solid color-mix(in srgb, var(--panel-accent) 22%, #ffffff); border-radius: 7px; }
.settings-overview-panel-icon svg { width: 17px; height: 17px; stroke-width: 1.8; }
.settings-overview-panel-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.settings-overview-panel-title em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 800; }
.settings-overview-panel-title strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.settings-overview-panel-total { min-width: 64px; text-align: right; }
.settings-overview-panel-total strong { display: block; color: var(--panel-accent); font-size: 24px; line-height: 1; }
.settings-overview-panel-total small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 750; }
.settings-overview-panel-enter { min-height: 24px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--panel-accent); background: color-mix(in srgb, var(--panel-accent) 8%, #ffffff); border: 1px solid color-mix(in srgb, var(--panel-accent) 18%, #ffffff); border-radius: 5px; font-size: 8px; font-weight: 850; }
.settings-overview-panel-body { min-width: 0; padding-top: 16px; }
.settings-overview-section-label { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.settings-overview-section-label strong { color: var(--ink); font-size: 11px; font-weight: 900; }
.settings-overview-section-label span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 750; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.settings-overview-empty { min-height: 34px; display: flex; align-items: center; padding: 0 8px; color: var(--muted); background: #f8fbfb; border: 1px dashed var(--soft-line); border-radius: 6px; font-size: 9px; font-weight: 800; }
.settings-workflow-score-list { display: flex; flex-direction: column; gap: 10px; }
.settings-workflow-score { min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) 28px; align-items: center; gap: 10px; }
.settings-workflow-score span { min-width: 0; overflow: hidden; color: #4f6065; font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.settings-workflow-score strong { color: var(--ink); font-size: 10px; font-weight: 900; text-align: right; }
.settings-score-track { height: 7px; overflow: hidden; background: #eef2f2; border-radius: 3px; }
.settings-score-track i { display: block; width: var(--score); height: 100%; background: var(--bar-color, var(--panel-accent)); border-radius: inherit; }
.settings-overview-note-line { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--soft-line); }
.settings-overview-note-line span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 750; }
.settings-overview-note-line i { width: 6px; height: 6px; flex: 0 0 auto; background: var(--note-color, var(--panel-accent)); border-radius: 2px; }
.settings-platform-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.settings-platform-line { min-width: 0; min-height: 42px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--soft-line); }
.settings-platform-line > i { width: 6px; height: 6px; background: var(--platform-color, #4f8b6c); border-radius: 2px; }
.settings-platform-copy { min-width: 0; }
.settings-platform-copy strong, .settings-platform-copy em { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-platform-copy strong { color: var(--ink); font-size: 11px; font-weight: 900; }
.settings-platform-copy em { margin-top: 3px; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 700; }
.settings-platform-line > strong { color: var(--ink); font-size: 12px; font-weight: 900; }
.settings-model-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 16px; overflow: hidden; background: var(--soft-line); border: 1px solid var(--soft-line); border-radius: 6px; }
.settings-model-type { min-width: 0; padding: 11px 9px; background: #f8faf9; }
.settings-model-type span { display: block; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.settings-model-type strong { display: block; margin-top: 5px; color: var(--ink); font-size: 15px; font-weight: 900; }
.settings-path-list { display: flex; flex-direction: column; }
.settings-path-line { min-width: 0; min-height: 42px; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 14px; border-bottom: 1px solid var(--soft-line); }
.settings-path-line:last-child { border-bottom: 0; }
.settings-path-line span { color: var(--muted); font-size: 11px; font-weight: 800; }
.settings-path-line code { min-width: 0; overflow: hidden; color: #45575c; font-family: "Cascadia Code", Consolas, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.settings-overview-user-table { min-width: 0; overflow: hidden; border: 1px solid var(--soft-line); border-radius: 6px; }
/* ⚠️ 行高 = 现有高度的 80%（用户 2026-09-18 要求）：48 × 0.8 = 38.4，表头 27 × 0.8 = 21.6。
   用 calc 表达，将来调基准值这里自动跟着变。名称列加宽保持（让三个账号名完整显示）。 */
.settings-overview-user-head, .settings-overview-user-row { min-width: 0; display: grid; grid-template-columns: minmax(132px, 1fr) 68px 62px minmax(180px, 1.55fr); align-items: center; gap: 10px; padding: 0 10px; }
.settings-overview-user-head { min-height: calc(27px * .8); color: var(--muted); background: #f6f9f8; border-bottom: 1px solid var(--soft-line); font-size: 11px; font-weight: 850; }
.settings-overview-user-row { min-height: calc(48px * .8); background: #fff; border-bottom: 1px solid var(--soft-line); }
.settings-overview-user-row:last-child { border-bottom: 0; }
.settings-overview-user-name, .settings-overview-user-storage { min-width: 0; }
.settings-overview-user-name strong, .settings-overview-user-name small, .settings-overview-user-storage code, .settings-overview-user-storage small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-overview-user-name strong { color: var(--ink); font-size: 11px; font-weight: 900; }
.settings-overview-user-name small, .settings-overview-user-storage small { margin-top: 2px; color: var(--muted); font-size: 7px; font-weight: 750; }
.settings-overview-user-role { color: #53656a; font-size: 11px; font-weight: 800; white-space: nowrap; }
.settings-overview-user-status { width: max-content; min-height: 20px; display: inline-flex; align-items: center; padding: 0 6px; color: #28734f; background: #edf8f1; border: 1px solid #cfe8d8; border-radius: 4px; font-size: 7px; font-weight: 900; white-space: nowrap; }
.settings-overview-user-status.is-pending { color: #8a641b; background: #fff8e7; border-color: #ead9aa; }
.settings-overview-user-status.is-disabled { color: #8a4a46; background: #fff3f2; border-color: #ebcecb; }
.settings-overview-user-storage code { color: #45575c; font-family: "Cascadia Code", Consolas, monospace; font-size: 8px; }
.settings-ratio-stack { display: flex; flex-direction: column; gap: 16px; padding-top: 3px; }
.settings-ratio-row { min-width: 0; }
.settings-ratio-row-head { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.settings-ratio-row-head span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.settings-ratio-row-head strong { color: var(--ink); font-size: 13px; font-weight: 900; }
.settings-ratio-track { height: 5px; background: #eeeef3; border-radius: 2px; }
.settings-ratio-track i { display: block; width: var(--ratio); height: 100%; background: var(--panel-accent); border-radius: inherit; }
.settings-compact-facts { display: flex; flex-direction: column; margin-top: 15px; padding-top: 7px; border-top: 1px solid var(--soft-line); }
.settings-compact-facts div { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--soft-line); }
.settings-compact-facts div:last-child { border-bottom: 0; }
.settings-compact-facts span { color: var(--muted); font-size: 11px; font-weight: 750; }
.settings-compact-facts strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 9px; font-weight: 900; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.settings-network-reading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 0 18px; border-bottom: 1px solid var(--soft-line); }
.settings-network-reading-mark { width: 48px; height: 48px; display: grid; place-items: center; color: #ffffff; background: #4f8b6c; border-radius: 8px; }
.settings-network-reading-mark svg { width: 22px; height: 22px; }
.settings-network-reading span span, .settings-network-reading em, .settings-network-reading strong, .settings-network-reading small { display: block; }
.settings-network-reading em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 750; }
.settings-network-reading strong { margin-top: 4px; color: var(--ink); font-size: 15px; font-weight: 900; }
.settings-network-reading small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 750; }
.settings-network-facts { display: flex; flex-direction: column; padding-top: 7px; }
.settings-network-fact { min-width: 0; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--soft-line); }
.settings-network-fact:last-child { border-bottom: 0; }
.settings-network-fact span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.settings-network-fact strong { color: var(--ink); font-size: 9px; font-weight: 900; white-space: nowrap; }
.settings-provider-layout { display: grid; grid-template-columns: minmax(176px, 190px) minmax(0, 1fr); gap: 12px; align-items: start; }
.settings-network-layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 12px; align-items: start; }
.network-left-stack { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.settings-network-layout .network-dashboard-list { min-width: 0; display: block; }
/* 右侧卡片用 CSS 多列布局（column-count）**按实际高度自动平衡**成两列：
   浏览器会按顺序把卡片填进两列，并让两列高度尽量相等 ——
   所以不会出现"一列只有一张卡、另一列排满"的情况。
   这与「用户与存储」页的 flex 两列（.settings-storage-columns）不同：
   那边两列固定、每列各自堆叠；这里要的是**自动均衡**，所以用多列布局。

   注：多列布局下父级 gap 不生效，卡片间距改用子元素的 margin-bottom 补。 */
.settings-network-layout .network-dashboard-columns { display: block; column-count: 2; column-gap: 10px; }
.settings-network-layout .network-dashboard-columns > * { break-inside: avoid; margin-bottom: 10px; }
@media (max-width: 1279px) { .settings-network-layout .network-dashboard-columns { column-count: 1; } }
.network-overview-card { grid-column: 1 / -1; }
.network-left-stack .settings-form-head { align-items: center; padding-bottom: 8px; }
.network-left-stack .settings-form-head h3 { margin: 0; font-size: 13px; }
/* 开关行：必须是「图标+文字在左、开关在右」的横向布局。
   注意 .settings-form > label 的特异性比 .settings-agent-autostart-row 高，
   且它是 flex-direction:column —— 若只写后者会被压过：开关的 flex:0 0 30px
   会落到主轴（高度）上被撑成正方形，行内内容也会按内容宽度居中而不齐。
   所以下面用 .settings-form > label.settings-agent-autostart-row 明确覆盖。 */
.settings-agent-autostart-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 0; cursor: pointer; }
.settings-form > label.settings-agent-autostart-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.network-ollama-policy-row { border-top: 1px solid rgba(128, 150, 153, .18); margin-top: 4px; padding-top: 12px; }
.network-ollama-policy-fields { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 8px; padding: 5px 0 0; }
.network-ollama-policy-fields label { display: grid; gap: 4px; color: #6b7e81; font-size: 11px; }
.network-ollama-policy-fields input { width: 100%; min-width: 0; }
.settings-agent-autostart-copy { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 9px; }
.settings-agent-autostart-copy > svg { width: 17px; height: 17px; flex: 0 0 auto; color: #277f85; }
.settings-agent-autostart-copy > span { min-width: 0; }
.settings-agent-autostart-copy strong, .settings-agent-autostart-copy small { display: block; }
.settings-agent-autostart-copy strong { color: var(--ink); font-size: 10px; }
.settings-agent-autostart-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
/* 开关固定在行右端（margin-left:auto 双保险，避免被中间留白挤到中间） */
/* 扁长方形：30×15 的轨道 + 11×11 滑块（高度约为原先正方形状态的一半） */
.settings-switch { position: relative; width: 30px; height: 15px; flex: 0 0 30px; margin-left: auto; align-self: center; }
.settings-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* 长方形开关：小倒角轮廓，滑块同样是小倒角矩形，避免看起来像圆点或方块。 */
.settings-switch i { position: absolute; inset: 0; background: #cbd6d8; border: 1px solid #bcc9cb; border-radius: 4px; transition: background .15s ease, border-color .15s ease; }
.settings-switch i::after { content: ""; position: absolute; left: 2px; top: 1px; width: 11px; height: 11px; background: #fff; border-radius: 2px; box-shadow: 0 1px 2px rgba(30,48,54,.2); transition: left .15s ease; }
.settings-switch input:checked + i { background: #278f95; border-color: #278f95; }
.settings-switch input:checked + i::after { left: 15px; }
.settings-switch input:focus-visible + i { outline: 2px solid rgba(39,143,149,.28); outline-offset: 2px; }
.settings-switch input:disabled + i { opacity: .5; }
.settings-agent-runtime-error, .settings-agent-runtime-note { margin-top: 8px; color: #7b6161; font-size: 9px; line-height: 1.5; }
.settings-agent-runtime-error { display: flex; align-items: flex-start; gap: 6px; padding: 7px 8px; background: #fff5f4; border: 1px solid #efd9d6; border-radius: 6px; }
.settings-agent-runtime-error svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; color: #ad5a50; }
.settings-agent-runtime-note { color: var(--muted); }
.network-dashboard-card .settings-form-head p, .network-migration-card .settings-form-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1.4; }
/* 折叠卡片：summary 与 body 之间不能留 .settings-form 的 12px flex gap，
   否则收起时标题行下会拖一条空白。padding 也归零，改由 summary/body 自己控制。 */
.network-collapsible-card { gap: 0; padding: 0; overflow: hidden; }
.network-collapsible-card > summary::-webkit-details-marker { display: none; }
.network-card-summary { min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) max-content 16px; align-items: center; gap: 9px; padding: 5px 12px; cursor: pointer; list-style: none; }
.network-card-summary div { min-width: 0; }
.network-card-summary h3 { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.15; }
/* 「公网」三张卡（通道状态 / 接入信息 / 公网加固）标题用橙色，和其它卡片区分成一组。
   注意特异性要压过上面的 .network-card-summary h3（后者是 --ink）。 */
.network-public-card > .network-card-summary h3 { color: var(--amber); }
.network-card-summary p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.network-card-summary > .settings-value { max-width: none; overflow-wrap: normal; white-space: nowrap; }
.network-card-summary > svg { width: 14px; height: 14px; color: var(--muted); transition: transform .18s ease; }
.network-collapsible-card[open] > .network-card-summary { border-bottom: 1px solid var(--soft-line); }
.network-collapsible-card[open] > .network-card-summary > svg { transform: rotate(180deg); }
.network-card-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; }
.network-card-body.network-migration-grid { display: grid; }
.network-migration-grid, .network-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.network-overview-card .network-card-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 12px; }
.network-overview-card .network-live-rows { display: contents; }
.network-overview-card .settings-row { min-height: 58px; padding: 10px 12px; }
.network-dashboard-card:not(.network-overview-card) .network-metric-grid, .network-migration-card .network-migration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.network-migration-item, .network-metric-grid span { min-width: 0; min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 9px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.network-migration-item strong, .network-metric-grid strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.network-migration-item span, .network-metric-grid em { min-width: 0; overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.network-metric-grid em { color: var(--cyan); }
.network-live-rows { display: flex; flex-direction: column; gap: 7px; padding-top: 2px; }
.network-plan-list { display: flex; flex-direction: column; gap: 7px; }
.network-plan-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.network-plan-row div { min-width: 0; }
.network-plan-row strong, .network-plan-row span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-plan-row strong { color: var(--ink); font-size: 10px; }
.network-plan-row span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.network-plan-row em { color: var(--cyan); font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }
/* ⚠️「资源消耗」用量表：横向 = 调用项（模型），纵向 = 用户名（含每天 100 张额度条），行末 = 总计。尽量紧凑。 */
.network-usage-table-wrap { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.network-usage-empty { padding: 10px; color: var(--muted); background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; font-size: 9px; }
.network-usage-table { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; overflow: hidden; font-size: 9px; }
.network-usage-table th, .network-usage-table td { padding: 5px 7px; border-bottom: 1px solid var(--soft-line); text-align: right; white-space: nowrap; }
.network-usage-table thead th { color: var(--muted); background: #f7fbfb; font-size: 8px; font-weight: 900; }
.network-usage-table th.is-user { position: relative; width: 34%; text-align: left; }
.network-usage-table thead th.is-user { color: var(--muted); }
.network-usage-table td.is-empty { color: #b9c8cb; }
.network-usage-table td.is-total { color: var(--ink); font-weight: 900; }
.network-usage-table tbody tr:last-child th, .network-usage-table tbody tr:last-child td { border-bottom: 0; }
.network-usage-name { color: var(--ink); font-size: 9px; font-weight: 900; }
.network-usage-quota { margin-left: 5px; padding: 0 4px; color: var(--muted); background: #f1f6f7; border-radius: 3px; font-size: 7.5px; font-weight: 900; }
.network-usage-quota.is-over { color: #9a3f3f; background: #fff1f1; }
.network-usage-bar { position: absolute; left: 7px; bottom: 2px; width: calc(100% - 14px); height: 2px; background: #e7f1f2; border-radius: 2px; }
.network-usage-bar::before { content: ''; display: block; width: var(--usage-pct, 0%); height: 100%; background: var(--cyan); border-radius: 2px; }
.network-usage-foot { color: var(--muted); font-size: 8px; line-height: 1.4; }
@media (max-width: 860px) {
  .personal-settings-grid, .personal-storage-layout { grid-template-columns: 1fr; }
  .personal-storage-roots { grid-row: auto; }
  .personal-knowledge-console { grid-template-columns: 1fr; }
  .personal-knowledge-sidebar { max-height: 310px; border-right: 0; border-bottom: 1px solid var(--soft-line); }
  .personal-kb-edit { grid-template-columns: 1fr; }
  .personal-kb-tools { align-items: stretch; flex-direction: column; }
  .personal-kb-tools > form { width: 100%; }
  .image-archive-head { flex-direction: column; }
  .image-archive-target { width: 100%; max-width: none; }
  .image-archive-upload-grid { grid-template-columns: 1fr; }
  .image-archive-search form { grid-template-columns: 1fr 1fr; }
  .image-archive-search form > input:first-child { grid-column: 1 / -1; }
  .settings-network-layout .network-dashboard-list { grid-template-columns: 1fr; }
  .network-overview-card { grid-column: auto; }
  .network-overview-card .network-card-body, .network-dashboard-card:not(.network-overview-card) .network-metric-grid, .network-migration-card .network-migration-grid { grid-template-columns: 1fr; }
  .network-ollama-policy-fields { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .personal-knowledge-main { padding: 10px; }
  .image-archive-panel { padding: 9px; }
  .image-archive-dropzone { grid-template-columns: 26px minmax(0, 1fr); padding: 11px; }
  .image-archive-dropzone > svg { width: 22px; height: 22px; }
  .image-archive-switches, .image-archive-edit-grid, .image-archive-search form { grid-template-columns: 1fr; }
  .image-archive-edit-grid .span-2, .image-archive-search form > input:first-child { grid-column: auto; }
  .image-archive-draft { grid-template-columns: 1fr; }
  .image-archive-preview { width: 100%; max-height: 240px; aspect-ratio: 4 / 3; }
  .image-archive-actions > :is(button, em) { width: 100%; justify-content: center; margin-left: 0; text-align: center; }
  .image-archive-result { grid-template-columns: 44px minmax(0, 1fr); }
  .image-archive-result .outline-button { grid-column: 1 / -1; justify-content: center; }
}
.settings-comfy-workbench { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.comfy-import-grid, .provider-editor-grid, .provider-model-grid { display: grid; gap: 10px; }
.comfy-import-grid { grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) minmax(220px, 1fr); align-items: end; }
.provider-editor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.provider-model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.provider-route-settings { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.provider-route-settings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.provider-route-settings-head strong { color: var(--ink); font-size: 11px; }
.provider-route-settings-head span { color: var(--muted); font-size: 9px; }
.provider-route-settings-list { display: flex; flex-direction: column; gap: 5px; }
.provider-route-setting-row { min-height: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 128px 96px; align-items: center; gap: 8px; padding: 5px 7px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.provider-route-model { min-width: 0; display: flex; align-items: center; gap: 7px; }
.provider-route-model em { flex: 0 0 auto; padding: 2px 4px; color: #397078; background: #edf7f7; border-radius: 3px; font-size: 8px; font-style: normal; font-weight: 800; }
.provider-route-model strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.provider-route-setting-row label { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 700; white-space: nowrap; }
.provider-route-setting-row input { width: 100%; min-width: 0; height: 25px; padding: 0 5px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; outline: none; font: inherit; font-size: 9px; font-weight: 400; }
.provider-route-setting-row input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.provider-route-price-empty { min-height: 1px; }
.provider-editor-head { display: grid; grid-template-columns: minmax(150px, .36fr) minmax(280px, 1fr) auto; align-items: center; }
.provider-title-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.provider-title-actions .run-button { min-height: 32px; padding: 0 10px; white-space: nowrap; }
.provider-head-controls { min-width: 220px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.provider-head-controls label { width: 118px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 900; text-align: left; }
.provider-head-controls input { height: 28px; padding: 0 8px; font-size: 9px; }
.provider-param-panel { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); gap: 12px; padding: 10px 12px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 8px; }
.provider-config-fields { min-width: 0; display: flex; flex-direction: column; }
.provider-config-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px; align-items: end; padding: 6px 0; border-bottom: 1px solid var(--soft-line); }
.provider-config-row:first-child { padding-top: 0; }
.provider-config-row:last-child { padding-bottom: 0; border-bottom: 0; }
.provider-key-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
.provider-key-cell-multi { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.provider-key-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
.provider-key-state { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; color: #9b5f2a; background: #fff8eb; border: 1px solid rgba(180,121,45,.22); border-radius: 5px; font-size: 9px; white-space: nowrap; }
.provider-key-state.saved { color: var(--cyan); background: #eef8f7; border-color: rgba(30,158,170,.18); }
.provider-key-state.pending { color: #9b6b20; background: #fff8eb; border-color: rgba(180,121,45,.28); }
.provider-key-save-button { min-height: 34px; padding: 0 9px; white-space: nowrap; }
.provider-key-save-button svg { width: 13px; height: 13px; }
.provider-validation-column { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-left: 12px; border-left: 1px solid var(--soft-line); }
.provider-verify-actions { display: grid; grid-template-columns: repeat(4, minmax(76px, 1fr)); align-items: end; gap: 7px; }
.provider-verify-actions .run-button { min-height: 34px; padding: 0 9px; white-space: nowrap; }
.provider-probe-status { min-width: 0; min-height: 30px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; padding: 0 9px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 5px; }
.provider-probe-status strong { color: var(--muted); font-size: 8px; font-weight: 900; white-space: nowrap; }
.provider-probe-status em { min-width: 0; overflow: hidden; color: var(--ink); font-size: 9px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.provider-probe-status.ok em { color: var(--cyan); }
.provider-probe-status.failed em { color: #b2403d; }
.provider-probe-status.muted em { color: var(--muted); }
.provider-generation-probe { min-width: 0; display: grid; grid-template-columns: minmax(132px, .62fr) minmax(0, 1.38fr); gap: 9px; align-items: center; padding: 7px 0 0; border-top: 1px solid var(--soft-line); }
.provider-generation-probe-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 7px; align-items: center; }
.provider-generation-probe-head > span { min-width: 0; display: flex; gap: 6px; align-items: center; }
.provider-generation-probe-head svg { width: 14px; height: 14px; color: var(--muted); }
.provider-generation-probe-head strong { overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.provider-generation-probe-head > em { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.provider-generation-probe-head > small { grid-column: 2; grid-row: 1; padding: 3px 5px; color: var(--muted); background: #f2f6f6; border-radius: 4px; font-size: 8px; font-weight: 900; white-space: nowrap; }
.provider-generation-probe.ok .provider-generation-probe-head svg, .provider-generation-probe.ok .provider-generation-probe-head strong { color: var(--cyan); }
.provider-generation-probe.failed .provider-generation-probe-head svg, .provider-generation-probe.failed .provider-generation-probe-head strong { color: #b2403d; }
.provider-generation-probe.running .provider-generation-probe-head svg, .provider-generation-probe.running .provider-generation-probe-head strong { color: #9b6b20; }
.provider-generation-checks { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.provider-generation-check { min-width: 0; min-height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; align-content: center; padding: 5px 7px; background: #f8fbfb; border-left: 3px solid var(--soft-line); }
.provider-generation-check strong, .provider-generation-check em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-generation-check strong { color: var(--ink); font-size: 9px; font-weight: 900; }
.provider-generation-check em { grid-column: 1 / -1; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 700; }
.provider-generation-check b { grid-column: 2; grid-row: 1; color: var(--muted); font-size: 8px; font-weight: 900; white-space: nowrap; }
.provider-generation-check.ok { border-left-color: var(--cyan); }
.provider-generation-check.ok b { color: var(--cyan); }
.provider-generation-check.failed { border-left-color: #b2403d; background: #fff7f5; }
.provider-generation-check.failed b { color: #b2403d; }
.provider-generation-check.running { border-left-color: #b4792d; background: #fffaf0; }
.provider-generation-check.running b { color: #9b6b20; }
.provider-generation-check.skipped { opacity: .72; }
.provider-identity-grid { grid-template-columns: minmax(180px, 1fr) minmax(150px, .75fr) minmax(150px, .65fr); }
.provider-verify-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) auto auto auto; gap: 8px; align-items: end; padding: 10px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 8px; }
.provider-verify-row label { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.provider-verify-row .run-button { min-height: 34px; white-space: nowrap; }
.provider-model-catalog, .provider-model-picker { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 8px; }
.provider-model-category-grid, .provider-picker-grid { display: grid; gap: 10px; align-items: start; }
.provider-model-category-grid { grid-template-columns: minmax(420px, 2.05fr) repeat(3, minmax(140px, .82fr)); }
.provider-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.provider-model-category, .provider-picker-group { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; }
.provider-model-category-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--soft-line); }
.provider-model-category-head div { min-width: 0; }
.provider-model-category-head strong, .provider-picker-group > strong { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 10px; }
.provider-model-category-head svg { width: 13px; height: 13px; color: var(--cyan); }
.provider-model-category-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.provider-model-row-list, .provider-picker-group > div { max-height: 430px; display: flex; flex-direction: column; gap: 6px; overflow: auto; padding-right: 2px; }
.provider-model-family { min-width: 0; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; overflow: hidden; }
.provider-model-family > summary { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 16px; gap: 7px; align-items: center; padding: 8px; cursor: pointer; list-style: none; }
.provider-model-family > summary::-webkit-details-marker { display: none; }
.provider-model-family-icon { width: 24px; height: 24px; display: grid; place-items: center; color: var(--cyan); background: #eef8f7; border: 1px solid rgba(30,158,170,.18); border-radius: 5px; }
.provider-model-family-icon svg, .provider-model-family-chevron { width: 13px; height: 13px; }
.provider-model-family-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.provider-model-family-title strong { overflow: hidden; color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.provider-model-family-title small { color: var(--muted); font-size: 7.5px; }
.provider-model-family-resolutions { display: flex; gap: 3px; align-items: center; }
.provider-model-family-resolutions em { min-width: 25px; padding: 3px 5px; color: #127b84; background: #edf9f8; border: 1px solid rgba(30,158,170,.22); border-radius: 4px; font-size: 7.5px; font-style: normal; font-weight: 900; text-align: center; }
.provider-model-family-chevron { color: var(--muted); transition: transform .16s ease; }
.provider-model-family[open] .provider-model-family-chevron { transform: rotate(180deg); }
.provider-model-family-members { display: flex; flex-direction: column; gap: 5px; padding: 0 6px 6px; border-top: 1px solid var(--soft-line); }
.provider-model-family-members .provider-model-row { border-color: transparent; border-bottom-color: var(--soft-line); border-radius: 0; }
.provider-model-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 20%) 22px; gap: 4px; align-items: center; padding: 6px 4px 6px 7px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.provider-model-row.has-route-priority { grid-template-columns: minmax(64px, 1fr) minmax(48px, .72fr) 72px 72px 22px 84px; gap: 3px; padding: 5px 4px 5px 6px; }
.provider-model-row.provider-model-row-simple { grid-template-columns: minmax(0, 1fr) 22px; padding: 5px 4px 5px 6px; }
.provider-model-row-simple > .provider-model-name-input { grid-column: 1; }
.provider-model-row-simple > .icon-button { grid-column: 2; grid-row: 1; }
.provider-model-full-name { display: none; grid-column: 1 / -1; grid-row: 2; padding: 6px 7px; color: var(--ink); background: #ffffff; border: 1px solid #bddfe2; border-radius: 5px; font-size: 9px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.provider-model-row-simple > .provider-model-name-input:focus + .provider-model-full-name { display: block; }
.provider-model-name-input, .provider-model-alias-input { min-width: 0; height: 30px; padding: 0 8px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 5px; font-size: 9px; text-overflow: ellipsis; }
.provider-model-alias-input { border-color: #bddfe2; background: #f7fcfc; }
.provider-model-row.has-route-priority > .provider-model-name-input { grid-column: 1; }
.provider-model-row.has-route-priority > .provider-model-alias-input { grid-column: 2; }
.provider-model-row.has-route-priority > .provider-model-resolution-inline { grid-column: 3; grid-row: 1; }
.provider-model-row.has-route-priority > .provider-model-price-control { grid-column: 4; }
/* 「首选 / 备用」路由框已删除：平台优先级取配置页里平台的排列顺序（见 image_model_routing.py） */
.provider-model-row.has-route-priority > .icon-button { grid-column: 5; grid-row: 1; }
/* 模型参数核实状态：只标出「哪个平台的哪个模型参数未核实」，不拦生成 */
.provider-model-row.has-route-priority > .provider-model-capability { grid-column: 6; grid-row: 1; justify-self: stretch; }
.provider-model-capability { align-self: center; padding: 2px 4px; border-radius: 4px; font-size: 7.5px; font-weight: 900; text-align: center; white-space: nowrap; }
.provider-model-capability.is-unverified { color: #8a6d1f; background: #fdf6e3; border: 1px solid rgba(200,160,40,.35); }
.provider-model-capability.is-verified { color: #127b84; background: #edf9f8; border: 1px solid rgba(30,158,170,.22); }
.provider-model-price-control { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px; }
.provider-model-price-control input { min-width: 0; height: 30px; padding: 0 3px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 5px; font-size: 8.5px; }
.provider-model-price-control em { color: var(--muted); font-size: 7.5px; font-style: normal; font-weight: 900; white-space: nowrap; }
.provider-model-priority-control { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px; }
.provider-model-priority-control > span { color: var(--muted); font-size: 7.5px; font-weight: 900; white-space: nowrap; }
.provider-model-priority-control select { min-width: 0; height: 30px; padding: 0 18px 0 4px; color: var(--ink); background-color: #ffffff; border: 1px solid var(--line); border-radius: 5px; font-size: 8.5px; }
.provider-model-priority-control select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); outline: none; }
.provider-model-resolution-inline { min-width: 0; height: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; align-items: center; }
.provider-model-resolution-inline label { min-width: 0; height: 30px; display: grid; grid-template-columns: 12px auto; gap: 2px; align-items: center; justify-content: center; color: #397078; background: #ffffff; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.provider-model-resolution-inline input { width: 12px; height: 12px; margin: 0; accent-color: var(--cyan); }
.provider-model-resolution-inline label span { font-size: 7.5px; font-weight: 900; }
.provider-model-resolution-inline.is-empty { visibility: hidden; pointer-events: none; }
.provider-model-row > .icon-button { width: 22px; height: 30px; }
.provider-model-row > .icon-button svg { width: 12px; height: 12px; }
.provider-picker-group > strong { justify-content: space-between; }
.provider-picker-group > strong em { color: var(--cyan); font-style: normal; }
.provider-picker-row { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; font-size: 9px; font-weight: 800; cursor: pointer; }
.provider-picker-row.configured { background: #eef8f7; border-color: rgba(30,158,170,.32); }
.provider-picker-family { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: center; padding: 7px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.provider-picker-family.configured { background: #eef8f7; border-color: rgba(30,158,170,.32); }
.provider-picker-family-name { min-width: 0; overflow: hidden; font-size: 9px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.provider-picker-family-options { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-start; }
.provider-picker-resolution { min-width: 34px; min-height: 27px; display: grid; grid-template-columns: 12px auto; gap: 3px; align-items: center; justify-content: center; padding: 0 5px; color: #397078; background: #ffffff; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.provider-picker-resolution.configured { border-color: rgba(30,158,170,.4); }
.provider-picker-resolution input { width: 12px; height: 12px; margin: 0; accent-color: var(--cyan); }
.provider-picker-resolution span { font-size: 7.5px; font-weight: 900; }
.provider-picker-row input { width: 14px; height: 14px; }
.provider-picker-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-picker-row em { color: var(--cyan); font-size: 8px; font-style: normal; font-weight: 900; white-space: nowrap; }
.provider-runninghub-catalog { gap: 12px; }
.provider-runninghub-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.provider-runninghub-summary span { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; }
.provider-runninghub-summary strong { color: var(--ink); font-size: 17px; font-weight: 900; }
.provider-runninghub-summary em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 850; }
.provider-runninghub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.provider-runninghub-group { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 7px; }
.provider-runninghub-row-list { max-height: 430px; display: flex; flex-direction: column; gap: 7px; overflow: auto; padding-right: 2px; }
.provider-runninghub-row { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.provider-runninghub-row.disabled { opacity: .6; }
.provider-runninghub-thumb { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; color: var(--cyan); background: #eef8f7; border: 1px solid rgba(30,158,170,.14); border-radius: 6px; }
.provider-runninghub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.provider-runninghub-thumb svg { width: 17px; height: 17px; }
.provider-runninghub-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.provider-runninghub-main strong, .provider-runninghub-main small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-runninghub-main strong { color: var(--ink); font-size: 10px; }
.provider-runninghub-main small { color: var(--muted); font-size: 8px; }
.provider-runninghub-main div { display: flex; flex-wrap: wrap; gap: 5px; }
.provider-runninghub-main em { min-height: 18px; display: inline-flex; align-items: center; padding: 0 6px; color: #397078; background: #eef8f7; border-radius: 4px; font-size: 8px; font-style: normal; font-weight: 850; }
.provider-runninghub-actions { display: flex; align-items: center; gap: 3px; }
.provider-runninghub-actions .icon-button { width: 25px; height: 25px; }
.provider-runninghub-actions .icon-button svg { width: 11px; height: 11px; }
.provider-save-actions { justify-content: flex-end; }
.comfy-workflow-manager { gap: 14px; }
.workflow-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--soft-line); }
.workflow-manager-head h3 { margin: 6px 0 0; color: var(--ink); font-size: 16px; }
.workflow-manager-head p { max-width: 560px; margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-category-strip { display: flex; flex-wrap: wrap; gap: 7px; }
.workflow-category-button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: var(--muted); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 9px; font-weight: 800; }
.workflow-category-button:hover, .workflow-category-button.active { color: var(--ink); background: #eef8f7; border-color: rgba(30,158,170,.36); }
.workflow-category-button svg { width: 13px; height: 13px; color: var(--cyan); }
.workflow-category-button strong { color: var(--faint); font-size: 8px; }
.workflow-title-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(260px, auto); gap: 10px; align-items: end; padding: 10px; background: #f6f9fa; border: 1px solid var(--soft-line); border-radius: 7px; }
.workflow-title-picker { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.workflow-inline-stats { min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.workflow-inline-stats span { min-height: 28px; display: inline-flex; align-items: center; padding: 0 9px; color: #5f7580; background: #ffffff; border: 1px solid var(--line); border-radius: 5px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.workflow-detail-grid { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.35fr); gap: 14px; align-items: start; }
.workflow-structure-panel, .workflow-exposure-panel { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.workflow-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--soft-line); }
.workflow-panel-head h4 { margin: 5px 0 0; color: var(--ink); font-size: 13px; }
.workflow-parameter-head { align-items: center; padding-bottom: 8px; }
.workflow-parameter-stats { min-width: 0; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; color: var(--muted); font-size: 8.5px; font-weight: 800; white-space: nowrap; }
.workflow-parameter-stats span { display: inline-flex; align-items: center; }
.workflow-parameter-stats span + span::before { content: "·"; margin: 0 7px; color: var(--faint); }
.workflow-parameter-stats strong { margin-right: 3px; color: var(--cyan); font-size: 9.5px; }
.workflow-structure-list { max-height: 540px; display: flex; flex-direction: column; gap: 6px; overflow: auto; padding-right: 2px; }
.workflow-structure-node { display: block; overflow: hidden; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.workflow-structure-node.has-exposed { border-color: rgba(30,158,170,.32); background: #f4fbfa; }
.workflow-structure-node summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 9px; cursor: pointer; list-style: none; }
.workflow-structure-node summary::-webkit-details-marker { display: none; }
.workflow-structure-node summary::before { content: ""; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--cyan); transform: rotate(0deg); transition: transform .16s; }
.workflow-structure-node[open] summary::before { transform: rotate(90deg); }
.workflow-node-main { min-width: 0; }
.workflow-node-main strong, .workflow-node-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-node-main strong { color: var(--ink); font-size: 10px; }
.workflow-node-main span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.workflow-node-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; color: var(--faint); font-size: 8px; font-weight: 800; white-space: nowrap; }
.workflow-node-meta em { color: var(--cyan); font-style: normal; }
.workflow-node-inputs { display: flex; flex-direction: column; gap: 6px; padding: 0 9px 9px 22px; }
.workflow-input-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.workflow-input-row span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.workflow-input-row strong, .workflow-input-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-input-row strong { color: var(--ink); font-size: 9px; }
.workflow-input-row small { color: var(--muted); font-size: 8px; }
.workflow-input-chip, .workflow-input-empty, .workflow-input-more { min-height: 24px; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0 7px; border-radius: 5px; font-size: 8px; font-weight: 800; }
.workflow-input-chip { color: #1b858b; background: #eef8f7; border: 1px solid rgba(30,158,170,.24); cursor: pointer; }
.workflow-input-chip:hover { border-color: rgba(30,158,170,.5); }
.workflow-input-chip svg { width: 11px; height: 11px; }
.workflow-input-chip.exposed { color: #8a651c; background: #fff7e3; border-color: rgba(194,147,44,.34); cursor: default; }
.workflow-input-empty, .workflow-input-more, .workflow-empty-note { color: var(--faint); background: #f6f9fa; border: 1px solid var(--soft-line); }
.workflow-structure-empty, .workflow-structure-more, .workflow-field-empty { padding: 12px; color: var(--muted); background: #f6f9fa; border: 1px dashed var(--line); border-radius: 7px; font-size: 9px; line-height: 1.5; }
.workflow-exposure-panel form { display: flex; flex-direction: column; gap: 12px; }
.workflow-exposure-panel form > label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.workflow-canvas-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding: 12px; background: #f6f9fa; border: 1px solid var(--soft-line); border-radius: 8px; }
.workflow-canvas-preview.empty { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; }
.workflow-canvas-preview.empty strong { color: var(--ink); font-size: 11px; }
.workflow-preview-node { min-width: 0; overflow: hidden; background: #ffffff; border: 1px solid rgba(30,158,170,.28); border-radius: 7px; box-shadow: 0 8px 18px rgba(31,52,59,.06); }
.workflow-preview-title { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; color: #173e45; background: #eef8f7; border-bottom: 1px solid rgba(30,158,170,.18); font-size: 10px; font-weight: 900; }
.workflow-preview-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-preview-title em { color: #1b858b; font-size: 8px; font-style: normal; white-space: nowrap; }
.workflow-preview-body { display: flex; flex-direction: column; gap: 7px; padding: 10px; }
.workflow-preview-field { position: relative; min-width: 0; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.workflow-port-dot { width: 8px; height: 8px; border: 2px solid var(--cyan); border-radius: 50%; background: #ffffff; }
.workflow-preview-field label, .workflow-preview-field strong, .workflow-preview-field small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-preview-field label { color: var(--ink); font-size: 9px; font-weight: 900; }
.workflow-preview-field strong { color: #1b858b; font-size: 8px; }
.workflow-preview-field small { grid-column: 2 / -1; color: var(--muted); font-size: 8px; }
.workflow-preview-run { display: flex; justify-content: flex-end; padding: 0 10px 10px; }
.workflow-test-form { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--soft-line); }
.workflow-test-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.workflow-test-grid label, .comfy-import-grid label, .provider-editor-grid label, .provider-model-grid label, .provider-param-panel label { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.workflow-test-check { min-height: 34px; flex-direction: row !important; align-items: center; padding: 0 9px; background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; }
.workflow-test-check input { width: 14px; height: 14px; }
.workflow-test-result { display: flex; flex-direction: column; gap: 8px; }
.workflow-test-output { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.workflow-test-output span, .workflow-test-output strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.workflow-test-output span { color: var(--muted); }
.workflow-test-output strong { color: var(--ink); }
.workflow-readonly-fields { display: flex; flex-direction: column; gap: 7px; }
.workflow-readonly-fields > div { padding: 10px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.workflow-readonly-fields strong, .workflow-readonly-fields span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-readonly-fields strong { color: var(--ink); font-size: 10px; }
.workflow-readonly-fields span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.workflow-empty-detail { min-width: 0; }
.provider-setting-list { display: flex; flex-direction: column; gap: 5px; }
.provider-health-toolbar { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; padding: 7px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.provider-health-toolbar .run-button { min-height: 30px; padding: 0 9px; white-space: nowrap; }
.provider-health-refresh-button { width: 34px; min-width: 34px; justify-content: center; padding: 0 !important; }
.provider-health-toolbar .run-button svg { width: 13px; height: 13px; }
.provider-health-preview { min-width: 0; min-height: 30px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 8px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 5px; }
.provider-health-preview strong { color: var(--muted); font-size: 8px; font-weight: 900; white-space: nowrap; }
.provider-health-preview em { min-width: 0; overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.provider-health-preview.ok em { color: var(--cyan); }
.provider-health-preview.failed em { color: #b2403d; }
.provider-health-preview.running em { color: #9b6b20; }
.provider-setting-item { width: 100%; min-height: 44px; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 7px; padding: 6px 8px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; text-align: left; }
.provider-setting-item:hover, .provider-setting-item.active { color: var(--ink); border-color: rgba(30,158,170,.42); background: #eef8f7; }
.provider-setting-item.disabled-provider { opacity: .58; }
.provider-setting-icon { width: 26px; height: 26px; display: grid; place-items: center; color: var(--cyan); background: var(--cyan-soft); border-radius: 6px; }
.provider-setting-icon svg { width: 14px; height: 14px; }
.provider-setting-item span:not(.provider-setting-icon) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.provider-setting-item strong, .provider-setting-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-setting-item strong { font-size: 10px; }
.provider-setting-item small { color: var(--muted); font-size: 8px; }
.provider-setting-item em { min-width: 0; grid-column: 2; overflow: hidden; color: var(--faint); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.provider-setting-item .provider-health-error { grid-column: 2; margin-top: -1px; color: #b2403d; font-size: 8px; font-weight: 900; }
.provider-add-button { width: 100%; justify-content: center; }
.provider-health-detail { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; background: #eef8f7; border: 1px solid rgba(30,158,170,.22); border-radius: 7px; }
.provider-health-detail.empty { visibility: hidden; min-height: 1px; padding: 0; border: 0; background: transparent; }
.provider-health-detail.failed { background: #fff3f1; border-color: rgba(178,64,61,.24); }
.provider-health-detail.running { background: #fff8eb; border-color: rgba(180,121,45,.24); }
.provider-health-detail strong { color: var(--cyan); font-size: 10px; font-weight: 900; white-space: nowrap; }
.provider-health-detail.failed strong { color: #b2403d; }
.provider-health-detail.running strong { color: #9b6b20; }
.provider-health-detail-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
.provider-health-detail-grid span { min-width: 0; overflow: hidden; color: var(--ink); font-size: 8px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.settings-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
/* 模型配置页：两个 Agent 方案（首选方案 / 混合本地）并排两列，各自独立不拉齐高度 */
.settings-two-column-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.settings-two-column-grid > .settings-form { min-width: 0; }
@media (max-width: 1279px) { .settings-two-column-grid { grid-template-columns: minmax(0, 1fr); } }
/* 高级区折叠：整块可点，去掉默认三角标 */
.settings-subtle-section > summary { cursor: pointer; list-style: none; }
.settings-subtle-section > summary::-webkit-details-marker { display: none; }
.settings-subtle-section > summary h3 { margin: 0; }
.settings-subtle-section[open] > summary { margin-bottom: 6px; }
/* Agent 名称不换行 */
.nowrap { white-space: nowrap; }
.settings-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--soft-line); }
.settings-form-head h3 { margin: 6px 0 0; color: var(--ink); font-size: 14px; }
.settings-form > label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.settings-form input, .settings-form select, .settings-form textarea { width: 100%; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; outline: none; font-size: 10px; }
.settings-form input, .settings-form select { height: 34px; padding: 0 9px; }
.settings-form textarea { min-height: 92px; padding: 8px 9px; resize: vertical; line-height: 1.5; }
.settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.12); }
.settings-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; padding-top: 3px; }
/* 模型配置页：按钮右端与上方下拉框右端对齐。
   下拉框右侧还留着 84px 备注位 + 10px 间隔，所以按钮区右边距 = 84 + 10 = 94px；
   align-items:center 让「已载入当前配置」在高度上居中。 */
[data-agent-model-defaults] > .settings-form-actions { padding-right: 94px; align-items: center; }
/* 同一页四个区块（Agent 方案默认模型 / 生图模型与平台顺序配置 / 一键 Wiki 配置 / 图片打标配置）的
   保存·写入按钮必须左右对齐 —— 所以都套用上面同一个 94px 右缩进。
   注意：94px 是"下拉框右侧 84px 备注位 + 10px 间隔"，目的是让按钮右端
   与上方下拉框右端齐平；四个区保持一致才不会参差。
   （2026-10-12：图片打标配置从「一键 Wiki 配置」拆出后，也一并纳入，否则它的按钮会比上面那块更靠右。） */
[data-agent-model-defaults] > .settings-form-actions,
[data-image-model-routes] > .settings-form-actions,
[data-wiki-engine-config] > .settings-form-actions,
[data-image-archive-config] > .settings-form-actions { padding-right: 94px; align-items: center; }

/* 三个区块的「保存 / 写入」黑按钮：统一宽度 + 右端对齐。
   94px = 行内下拉框右侧的备注位(84px) + 间距(10px)，见 .model-agent-row 的栅格定义；
   所以按钮右端与上方"模型下拉框"的右端齐平。
   状态文字紧跟按钮右侧（间距取 .settings-form-actions 的 gap: 7px）。 */
[data-agent-model-defaults] > .settings-form-actions > .run-button,
[data-image-model-routes] > .settings-form-actions > .run-button,
[data-wiki-engine-config] > .settings-form-actions > .run-button,
[data-image-archive-config] > .settings-form-actions > .run-button {
  min-width: 132px;
  justify-content: center;
}
/* 按钮右侧的状态文字（2026-09-21 恢复显示）：用户要求"操作后要有反馈"。
   文案由 JS 控制在 6 字以内；这里固定宽度 + 右对齐 + 超长省略，
   这样文字长短变化时不会把黑色按钮挤动（按钮位置保持不动）。 */
[data-agent-model-defaults] > .settings-form-actions > .settings-help,
[data-image-model-routes] > .settings-form-actions > .settings-help,
[data-wiki-engine-config] > .settings-form-actions > .settings-help,
[data-image-archive-config] > .settings-form-actions > .settings-help {
  flex: 0 0 auto;
  width: 76px;
  text-align: right;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 模型配置页字号放大（2026-09-21）──────────────────────────────
   用户反馈：这一页整体按 9-10px 设计，比正常网页小 3-4px，长文案看着费劲。
   只针对本页三个区块（Agent 方案默认模型 / 生图模型与平台顺序配置 / 一键 Wiki 配置）
   放大字号，并同步加大行高与控件高度，避免文字变大后挤在一起。
   其它页面的字号一律不动。 */
[data-agent-model-defaults] .settings-help,
[data-image-model-routes] .settings-help,
[data-wiki-engine-config] .settings-help { font-size: 12px; line-height: 1.65; }

[data-agent-model-defaults] .settings-form-head p,
[data-image-model-routes] .settings-form-head p,
[data-wiki-engine-config] .settings-form-head p { font-size: 11px; }

[data-agent-model-defaults] .settings-form input,
[data-agent-model-defaults] .settings-form select,
[data-image-model-routes] .settings-form input,
[data-image-model-routes] .settings-form select,
[data-wiki-engine-config] .settings-form input,
[data-wiki-engine-config] .settings-form select { font-size: 12px; height: 36px; }

/* ⚠️ 必须比 `.custom-tool-slots label.model-agent-row`（特异性 0,2,1）更具体，
   否则会被它压回 10px —— 所以这里用"属性 + 类 + 元素"三件套。 */
[data-agent-model-defaults] .custom-tool-slots label.model-agent-row,
[data-agent-model-defaults] label.model-agent-row,
[data-image-model-routes] label.model-agent-row,
[data-wiki-engine-config] label.model-agent-row { font-size: 12px; }

[data-agent-model-defaults] .model-agent-note,
[data-image-model-routes] .model-agent-note,
[data-wiki-engine-config] .model-agent-note { font-size: 11px; }

[data-agent-model-defaults] .settings-form-actions .run-button,
[data-image-model-routes] .settings-form-actions .run-button,
[data-wiki-engine-config] .settings-form-actions .run-button { font-size: 12px; }

[data-agent-model-defaults] .settings-form-head .outline-button,
[data-image-model-routes] .settings-form-head .outline-button,
[data-wiki-engine-config] .settings-form-head .outline-button { font-size: 12px; }

/* 三个区块的大标题（默认 14px）+ 模型卡片内的小标题（默认 12px） */
[data-agent-model-defaults] .settings-form-head h3,
[data-image-model-routes] .settings-form-head h3,
[data-wiki-engine-config] .settings-form-head h3 { font-size: 15px; }
[data-image-model-routes] .image-route-card .settings-form-head h3 { font-size: 13px; }

/* 兜底：本页若出现「settings-form 的直接子 label」（默认 9px），一并放大 */
[data-agent-model-defaults] .settings-form > label,
[data-image-model-routes] .settings-form > label,
[data-wiki-engine-config] .settings-form > label { font-size: 12px; }

/* 2026-10-12：图片打标配置（从「一键 Wiki 配置」拆出的新区块）套用上面同一套字号 ——
   两块并排出现，字号不一致会很明显。写一条独立规则，比在上面每条选择器里各插一行更清楚。 */
[data-image-archive-config] .settings-help,
[data-image-archive-config] .settings-form input,
[data-image-archive-config] .settings-form select,
[data-image-archive-config] .settings-form-actions .run-button,
[data-image-archive-config] .settings-form-head .outline-button { font-size: 12px; }
[data-image-archive-config] .settings-form input,
[data-image-archive-config] .settings-form select { height: 36px; }
[data-image-archive-config] label.model-agent-row,
[data-image-archive-config] .settings-form > label { font-size: 12px; }
[data-image-archive-config] .model-agent-note,
[data-image-archive-config] .settings-form-head p { font-size: 11px; }
[data-image-archive-config] .settings-form-head h3 { font-size: 15px; }
[data-image-archive-config] .settings-help { line-height: 1.65; }
.personal-settings-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.personal-settings-column { min-width: 0; }
.personal-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.personal-storage-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.personal-account-layout .personal-account-card { grid-column: 1 / -1; }
.personal-account-card { gap: 0; }
.personal-account-form { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.personal-account-form > label, .personal-password-fields > label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.personal-profile-actions { padding-top: 3px; }
.personal-profile-actions .outline-button, .personal-profile-actions .run-button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; }
.personal-profile-actions svg { width: 14px; height: 14px; }
.personal-password-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 13px; padding: 12px; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 7px; }
.personal-password-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.personal-password-head > div { display: flex; align-items: center; gap: 7px; color: var(--ink); }
.personal-password-head svg { width: 15px; height: 15px; color: var(--cyan); }
.personal-password-head strong { font-size: 11px; }
.personal-password-head > span { color: var(--muted); font-size: 9px; }
.personal-password-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.personal-settings-error { grid-column: 1 / -1; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; color: #9d3e35; background: #fff7f5; border: 1px solid #edcbc5; border-radius: 6px; font-size: 10px; font-weight: 800; }
.personal-settings-error svg { width: 16px; height: 16px; flex: 0 0 auto; }
.personal-role-badge { padding: 5px 7px; color: #276b5a; background: #eef8f4; border: 1px solid #cce6dc; border-radius: 5px; font-size: 9px; font-weight: 900; }
/* 「管理员账号」弹窗（在「用户与存储 → 用户审核」右上角打开，见 pages/settings/personal.js）。
   弹窗里复用的是页面版的账户资料表单，所以这里把它的栅格与卡片外壳还原成弹窗内的紧凑排版。 */
.admin-account-dialog { width: min(560px, calc(100vw - 40px)); }
.admin-account-dialog header > div { display: flex; flex-direction: column; gap: 3px; }
.admin-account-dialog header span, .admin-account-dialog footer > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.admin-account-body { max-height: min(62vh, 520px); overflow: auto; }
.admin-account-body .personal-settings-grid { display: block; gap: 0; }
.admin-account-body .personal-account-card { padding: 0; gap: 0; background: transparent; border: 0; border-radius: 0; }
.admin-account-body .personal-account-form { padding-top: 8px; }
.admin-account-body .personal-password-panel { margin-top: 9px; }
.admin-account-body .personal-password-fields { grid-template-columns: minmax(0, 1fr); }
.admin-account-body .personal-role-badge { display: none; }   /* 弹窗只给管理员开，身份徽标是多余的 */
.settings-form-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.personal-root-list { display: flex; flex-direction: column; gap: 7px; }
.personal-root-row { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 9px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 6px; }
.personal-root-row.is-active { background: #f1faf6; border-color: #bcded0; }
.personal-root-row.is-offline { background: #fafafa; color: var(--muted); }
.personal-root-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #397866; background: #edf7f3; border-radius: 5px; }
.personal-root-icon svg { width: 15px; height: 15px; }
.personal-root-copy { min-width: 0; }
.personal-root-copy strong, .personal-root-copy code { display: block; min-width: 0; }
.personal-root-copy strong { margin-bottom: 4px; color: var(--ink); font-size: 10px; }
.personal-root-copy code { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.personal-root-row > em { color: #276b5a; font-size: 9px; font-style: normal; font-weight: 900; }
.personal-inline-toggle { display: grid !important; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 7px !important; }
.personal-inline-toggle input { width: 15px !important; height: 15px !important; }
.personal-storage-note { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; color: #4c625d; background: #f5faf8; border: 1px solid #d9e9e3; border-radius: 6px; font-size: 9px; font-weight: 700; line-height: 1.5; }
.personal-storage-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: #397866; }
.personal-storage-path-control { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 6px; }
.personal-storage-path-control input[readonly] { color: #405d62; background: #f7faf9; cursor: default; }
.personal-storage-picker-button { width: 34px; height: 34px; }
.personal-storage-browser-dialog { width: min(760px, calc(100vw - 40px)); gap: 10px; }
.personal-storage-browser-dialog header > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.personal-storage-browser-dialog header strong { font-size: 13px; }
.personal-storage-browser-dialog header span { color: var(--muted); font-size: 9px; }
.personal-storage-browser-toolbar { min-width: 0; display: grid; grid-template-columns: minmax(150px, 210px) 32px minmax(0, 1fr) 32px; align-items: center; gap: 7px; }
.personal-storage-browser-toolbar select, .personal-storage-browser-toolbar input { width: 100%; min-width: 0; height: 32px; padding: 0 8px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; outline: none; font-size: 10px; }
.personal-storage-browser-toolbar input[readonly] { color: var(--muted); background: #f7faf9; }
.personal-storage-folder-editor { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 8px; background: #f1f8f7; border: 1px solid #d4e8e5; border-radius: 7px; }
.personal-storage-folder-editor[hidden] { display: none; }
.personal-storage-folder-editor > svg { width: 15px; height: 15px; color: var(--cyan); }
.personal-storage-folder-editor input { width: 100%; min-width: 0; height: 31px; padding: 0 8px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 5px; outline: none; font-size: 10px; }
.personal-storage-folder-editor .outline-button, .personal-storage-folder-editor .run-button { min-height: 31px; padding: 0 10px; }
.personal-storage-browser-list { min-height: 260px; max-height: min(52vh, 460px); display: flex; flex-direction: column; gap: 4px; padding: 6px; overflow: auto; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.personal-storage-browser-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 4px; padding: 3px; background: #fff; border: 1px solid transparent; border-radius: 6px; }
.personal-storage-browser-row:hover { background: #eef8f7; border-color: rgba(30,158,170,.26); }
.personal-storage-browser-row > button:first-child { min-width: 0; min-height: 38px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 7px; padding: 0 7px; color: var(--ink); background: transparent; border: 0; cursor: pointer; text-align: left; }
.personal-storage-browser-row > button:first-child > svg { width: 14px; height: 14px; color: var(--cyan); }
.personal-storage-browser-row > button:first-child > svg:last-child { width: 12px; height: 12px; color: var(--muted); }
.personal-storage-browser-row span { min-width: 0; }
.personal-storage-browser-row strong, .personal-storage-browser-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-storage-browser-row strong { color: var(--ink); font-size: 10px; }
.personal-storage-browser-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.personal-storage-browser-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.personal-storage-browser-dialog footer > span { color: var(--muted); font-size: 9px; }
.personal-storage-browser-dialog footer > div { display: flex; align-items: center; gap: 7px; }
.personal-storage-browser-dialog footer .solid-button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; }
.personal-storage-browser-dialog footer svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .personal-settings-overview { grid-template-columns: 1fr; }
  .personal-password-fields { grid-template-columns: 1fr; }
  .personal-password-head, .personal-storage-browser-dialog footer { align-items: flex-start; flex-direction: column; }
  .personal-storage-browser-toolbar { grid-template-columns: minmax(0, 1fr) 32px 32px; }
  .personal-storage-browser-toolbar > input { grid-column: 1 / -1; grid-row: 2; }
  .personal-storage-browser-dialog footer > div { width: 100%; justify-content: flex-end; }
}
.agent-personal-stack { display: flex; flex-direction: column; gap: 8px; }
.agent-personal-editor { overflow: hidden; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.agent-personal-editor > summary { min-height: 38px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 0 9px; cursor: pointer; list-style: none; }
.agent-personal-editor > summary::-webkit-details-marker { display: none; }
.agent-personal-editor > summary svg { width: 14px; height: 14px; color: var(--cyan); }
.agent-personal-editor > summary span { overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.agent-personal-editor > summary em { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 800; }
.agent-personal-editor[open] > summary { border-bottom: 1px solid var(--soft-line); }
.agent-personal-form { display: flex; flex-direction: column; gap: 8px; padding: 9px; }
.agent-personal-form label { min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.agent-personal-form input, .agent-personal-form select, .agent-personal-form textarea { width: 100%; padding: 7px 8px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; }
.agent-personal-form input, .agent-personal-form select { height: 31px; }
.agent-personal-form textarea { min-height: 68px; resize: vertical; line-height: 1.45; }
.agent-personal-form input:focus, .agent-personal-form select:focus, .agent-personal-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.agent-personal-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.agent-personal-resources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.agent-personal-resources fieldset { min-width: 0; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 7px; border: 1px solid var(--soft-line); border-radius: 5px; }
.agent-personal-resources legend { padding: 0 3px; color: var(--muted); font-size: 8px; font-weight: 900; }
.agent-personal-check { display: grid !important; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 5px !important; }
.agent-personal-check input { width: 13px !important; height: 13px !important; margin: 0; }
.agent-personal-check span { overflow: hidden; color: var(--ink); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.agent-personal-form-actions { display: flex; justify-content: flex-end; gap: 6px; }
.personal-knowledge-console { min-width: 0; min-height: 620px; display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.personal-knowledge-console > .knowledge-alert { grid-column: 1 / -1; margin: 10px 10px 0; }
.personal-knowledge-sidebar { min-width: 0; overflow: auto; padding: 10px; background: #f7faf9; border-right: 1px solid var(--soft-line); }
.personal-knowledge-create { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--soft-line); }
.personal-knowledge-create > strong { color: var(--ink); font-size: 12px; }
.personal-knowledge-create input, .personal-kb-edit input, .personal-kb-tools input { width: 100%; min-width: 0; height: 31px; padding: 0 8px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 5px; outline: none; font-size: 12px; }
.personal-knowledge-create .run-button { justify-content: center; }
.personal-knowledge-sidebar > section { margin-top: 12px; }
.personal-knowledge-sidebar > section > header, .personal-kb-documents > header, .personal-kb-results > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.personal-knowledge-sidebar > section > header span, .personal-kb-documents > header span, .personal-kb-results > header span { font-weight: 900; }
.personal-kb-row { width: 100%; min-width: 0; min-height: 28px; display: grid; grid-template-columns: 16px minmax(0, 1fr) 14px; align-items: center; gap: 6px; padding: 3px 7px; color: #52696e; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
.personal-kb-row:hover, .personal-kb-row.active { color: #204d52; background: #e7f2f0; }
.personal-kb-row svg { width: 13px; height: 13px; }
.personal-kb-row > span { min-width: 0; }
.personal-kb-row strong, .personal-kb-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-kb-row strong { font-size: 10px; }
.personal-kb-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.personal-kb-empty { padding: 12px 6px; color: var(--muted); font-size: 9px; text-align: center; }
.personal-knowledge-main { min-width: 0; overflow: auto; padding: 16px; }
.personal-knowledge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--soft-line); }
.personal-knowledge-head span { color: #368187; font-size: 8px; font-weight: 900; }
.personal-knowledge-head h3 { margin: 5px 0 0; color: var(--ink); font-size: 16px; }
.personal-knowledge-head p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.personal-kb-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 11px 0; }
/* 名称 / 说明 两个输入吃掉剩余宽度，按钮永远完整显示；一行放不下时按钮换到下一行并左对齐 */
.personal-kb-edit > input:first-of-type { flex: 1 1 140px; min-width: 120px; }
.personal-kb-edit > input:nth-of-type(2) { flex: 2 1 200px; min-width: 160px; }
.personal-kb-edit > button { flex: 0 0 auto; }
.personal-kb-tools { display: flex; align-items: center; gap: 7px; margin: 11px 0; }
.personal-kb-tools > form { display: flex; align-items: center; gap: 6px; }
.personal-kb-tools > form:last-child { min-width: 180px; flex: 1; }
.personal-kb-tools > form:last-child input { flex: 1; }
.personal-kb-documents, .personal-kb-results { margin-top: 14px; }
/* 「查看原件」是 article 的**第 4 个子元素**，但这里原来只有 3 列
   （图标 / 标题+路径 / 状态）→ 多出来的按钮被挤到第二行，看起来像"在文件名下面"。
   加上第 4 列（2026-09-21 用户要求：按钮放到标题行最右侧）。 */
.personal-kb-documents > article { min-width: 0; min-height: 42px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--soft-line); }
.personal-kb-documents > article > button { white-space: nowrap; }
.personal-kb-documents > article svg { width: 14px; height: 14px; color: #4b888d; }
.personal-kb-documents > article div { min-width: 0; }
.personal-kb-documents strong, .personal-kb-documents small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-kb-documents strong { color: var(--ink); font-size: 10px; }
.personal-kb-documents small, .personal-kb-documents em { color: var(--muted); font-size: 8px; font-style: normal; }
.personal-kb-results > article { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--soft-line); }
.personal-kb-results > article > span { width: 22px; height: 22px; display: grid; place-items: center; color: #356c71; background: #e6f0ef; border-radius: 5px; font-size: 9px; font-weight: 900; }
.personal-kb-results strong { color: var(--ink); font-size: 10px; }
.personal-kb-results p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
/* 知识库：左栏二级目录（图像 / 资料）+ 右栏子视图分区 */
.personal-kb-subs { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 10px; padding-left: 10px; border-left: 1px solid var(--soft-line); }
.personal-kb-sub { display: flex; align-items: center; gap: 6px; padding: 6px 8px; color: #52696e; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; font-size: 10px; }
.personal-kb-sub:hover, .personal-kb-sub.active { color: #1f4d52; background: #e7f2f0; }
.personal-kb-sub.active { font-weight: 900; }
.personal-kb-sub svg { width: 12px; height: 12px; }
.personal-kb-viewtabs { display: inline-flex; gap: 4px; margin: 12px 0 2px; padding: 3px; background: #f1f6f5; border-radius: 6px; }
.personal-kb-viewtab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; color: #52696e; background: transparent; border: 0; border-radius: 5px; cursor: pointer; font-size: 10px; }
.personal-kb-viewtab.active { color: #1f4d52; background: #fff; font-weight: 900; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.personal-kb-viewtab svg { width: 12px; height: 12px; }
.personal-kb-view { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.personal-kb-view .personal-kb-documents, .personal-kb-view .personal-kb-results { margin-top: 0; }
.personal-kb-block { padding: 15px 17px; background: #fbfdfc; border: 1px solid var(--soft-line); border-radius: 8px; }
.personal-kb-block > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.personal-kb-block > header strong { color: var(--ink); font-size: 11px; }
.personal-kb-block > header span { color: var(--muted); font-size: 9px; }
.personal-kb-block-row { display: flex; align-items: center; gap: 8px; }
.personal-kb-block-row input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 10px; }
.personal-kb-addtext { display: flex; flex-direction: column; gap: 8px; }
.personal-kb-addtext input, .personal-kb-addtext textarea { width: 100%; padding: 9px 10px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 10px; }
.personal-kb-addtext textarea { min-height: 104px; resize: vertical; font-family: inherit; line-height: 1.65; }
.personal-kb-addtext-foot { display: flex; justify-content: flex-end; }
.personal-kb-documents > article { min-height: 46px; }
.personal-knowledge-main { padding: 20px; }
.personal-knowledge-head h3 { font-size: 18px; }
.image-archive-panel { min-width: 0; display: flex; flex-direction: column; gap: 11px; margin-top: 14px; padding: 13px; background: #fbfdfd; border: 1px solid var(--line); border-radius: 7px; }
.image-archive-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--soft-line); }
.image-archive-head > div:first-child { min-width: 0; }
.image-archive-head span { color: #398187; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.image-archive-head h3 { margin: 4px 0 0; color: var(--ink); font-size: 14px; }
.image-archive-head p { max-width: 650px; margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.admin-private-kb-manager { overflow: hidden; background: #f4f8f7; border: 1px solid var(--soft-line); border-radius: 6px; }
.admin-private-kb-manager > summary { min-height: 44px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; }
.admin-private-kb-manager > summary::-webkit-details-marker { display: none; }
.admin-private-kb-manager > summary > svg { width: 14px; height: 14px; color: #397c70; }
.admin-private-kb-manager > summary > svg:last-child { color: var(--muted); transition: transform .16s; }
.admin-private-kb-manager[open] > summary > svg:last-child { transform: rotate(180deg); }
.admin-private-kb-manager > summary span { min-width: 0; }
.admin-private-kb-manager > summary strong, .admin-private-kb-manager > summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-private-kb-manager > summary strong { color: var(--ink); font-size: 10px; }
.admin-private-kb-manager > summary small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.admin-private-kb-body { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px 10px; border-top: 1px solid var(--soft-line); }
.admin-private-kb-body form { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(180px, 1fr) auto auto; align-items: end; gap: 7px; }
.admin-private-kb-body form:first-child { padding-bottom: 8px; border-bottom: 1px solid var(--soft-line); }
.admin-private-kb-body label { min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.admin-private-kb-body input { width: 100%; min-width: 0; height: 31px; padding: 0 8px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 5px; outline: none; font-size: 9px; }
.admin-private-kb-body input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.admin-private-kb-empty { min-height: 38px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.admin-private-kb-empty svg { width: 14px; height: 14px; color: #397c70; }
.asset-image-tag-status { min-height: 42px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 9px; color: #39786b; background: #f1f8f6; border: 1px solid #d5e8e1; border-radius: 5px; }
.asset-image-tag-status > svg { width: 15px; height: 15px; }
.asset-image-tag-status span, .asset-image-tag-status strong, .asset-image-tag-status small { min-width: 0; display: block; }
.asset-image-tag-status strong { color: var(--ink); font-size: 10px; }
.asset-image-tag-status small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.image-archive-target { min-width: 180px; max-width: 250px; }
.image-archive-target label, .image-archive-settings label { min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
.image-archive-target select, .image-archive-settings input, .image-archive-search input, .image-archive-edit-grid input, .image-archive-edit-grid textarea { width: 100%; min-width: 0; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; }
.image-archive-target select, .image-archive-settings input, .image-archive-search input, .image-archive-edit-grid input { height: 31px; padding: 0 8px; }
.image-archive-edit-grid textarea { min-height: 54px; padding: 7px 8px; resize: vertical; line-height: 1.45; }
.image-archive-target select:focus, .image-archive-settings input:focus, .image-archive-search input:focus, .image-archive-edit-grid :is(input, textarea):focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.image-archive-upload-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(220px, .88fr); gap: 9px; }
.image-archive-dropzone { min-width: 0; min-height: 126px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-content: center; gap: 6px 10px; padding: 15px; color: #607478; background: #fff; border: 1px dashed #a8bfbd; border-radius: 6px; transition: background .15s ease, border-color .15s ease; }
.image-archive-dropzone.drag-over { background: #eef8f6; border-color: #2d8c91; }
.image-archive-dropzone > svg { width: 27px; height: 27px; color: #478b90; grid-row: span 2; }
.image-archive-dropzone > div { min-width: 0; }
.image-archive-dropzone strong, .image-archive-dropzone span { display: block; }
.image-archive-dropzone strong { color: #334e53; font-size: 11px; }
.image-archive-dropzone > div > span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.image-archive-dropzone .knowledge-file-picker { justify-self: start; margin-top: 7px; }
.image-archive-settings { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 6px; }
.image-archive-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 2px; }
.image-archive-switches label, .image-archive-draft footer label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; color: #5e7074; font-size: 9px; font-weight: 700; }
.image-archive-switches input, .image-archive-draft footer input { width: 13px; height: 13px; margin: 0; }
.image-archive-file-strip { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 9px; color: #5a7073; background: #f4f8f7; border: 1px solid var(--soft-line); border-radius: 5px; font-size: 9px; }
.image-archive-file-strip strong { flex: 0 0 auto; color: #315d62; }
.image-archive-file-strip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-archive-file-strip .icon-button { width: 23px; height: 23px; margin-left: auto; }
.image-archive-file-strip .icon-button svg { width: 12px; height: 12px; }
.image-archive-local-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.image-archive-local-preview > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.image-archive-local-preview img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: #eef3f2; border: 1px solid var(--soft-line); border-radius: 4px; }
.image-archive-local-preview small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.image-archive-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.image-archive-actions em { margin-left: auto; color: var(--muted); font-size: 9px; font-style: normal; }
.image-archive-drafts { display: flex; flex-direction: column; gap: 8px; }
.image-archive-draft { min-width: 0; display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 10px; padding: 9px; background: #fff; border: 1px solid var(--soft-line); border-radius: 6px; }
.image-archive-draft.failed { border-color: #e5c4c0; background: #fffafa; }
.image-archive-draft.committed { border-color: #b9ddd0; }
.image-archive-preview { width: 122px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; color: #91a1a2; background: #f1f5f4; border-radius: 5px; }
.image-archive-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.image-archive-preview svg { width: 24px; height: 24px; }
.image-archive-draft-body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.image-archive-draft-body > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.image-archive-draft-body > header > div { min-width: 0; }
.image-archive-draft-body > header strong, .image-archive-draft-body > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-archive-draft-body > header strong { color: var(--ink); font-size: 10px; }
.image-archive-draft-body > header small { margin-top: 3px; color: var(--muted); font-family: Consolas, monospace; font-size: 8px; }
.image-archive-draft-body > header em { flex: 0 0 auto; padding: 3px 6px; color: #397078; background: #edf7f7; border-radius: 4px; font-size: 8px; font-style: normal; font-weight: 800; }
.image-archive-draft.failed .image-archive-draft-body > header em { color: #9a514b; background: #fff0ee; }
.image-archive-draft.committed .image-archive-draft-body > header em { color: #267255; background: #eaf7f0; }
.image-archive-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.image-archive-edit-grid label { min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 8px; font-weight: 800; }
.image-archive-edit-grid .span-2 { grid-column: 1 / -1; }
.image-archive-inline-error { display: flex; align-items: flex-start; gap: 5px; padding: 6px 7px; color: #95524c; background: #fff1ef; border: 1px solid #efd4d0; border-radius: 5px; font-size: 9px; line-height: 1.4; }
.image-archive-inline-error svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; }
.image-archive-draft footer { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.image-archive-draft footer .outline-button { min-height: 25px; padding: 0 7px; font-size: 8px; }
.image-archive-draft footer .outline-button svg { width: 11px; height: 11px; }
.image-archive-draft footer > small { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.image-archive-search { display: flex; flex-direction: column; gap: 8px; padding-top: 11px; border-top: 1px solid var(--soft-line); }
.image-archive-search > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.image-archive-search > header strong, .image-archive-search > header span { display: block; }
.image-archive-search > header strong { color: var(--ink); font-size: 11px; }
.image-archive-search > header span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.image-archive-search form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(120px, .7fr) minmax(120px, .7fr) auto; gap: 6px; }
.image-archive-search input::placeholder { font-size: 9px; }
.image-archive-results { display: flex; flex-direction: column; gap: 5px; }
.image-archive-result { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; background: #fff; border: 1px solid var(--soft-line); border-radius: 5px; }
.image-archive-result-thumb { width: 48px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; color: #8d9d9f; background: #f1f5f4; border-radius: 4px; }
.image-archive-result-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.image-archive-result-thumb svg { width: 18px; height: 18px; }
.image-archive-result > div:nth-child(2) { min-width: 0; }
.image-archive-result strong, .image-archive-result p, .image-archive-result small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.image-archive-result strong { color: var(--ink); font-size: 10px; white-space: nowrap; }
.image-archive-result p { margin: 3px 0; color: var(--muted); font-size: 9px; line-height: 1.35; white-space: nowrap; }
.image-archive-result small { color: #6a8083; font-size: 8px; white-space: nowrap; }
.image-archive-result .outline-button { min-height: 27px; padding: 0 7px; font-size: 9px; white-space: nowrap; }
.image-archive-result .outline-button svg { width: 12px; height: 12px; }
.image-archive-empty { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); background: #f7faf9; border: 1px dashed var(--line); border-radius: 5px; font-size: 9px; text-align: center; }
.image-archive-empty svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Keep archive copy readable while preserving the compact editor geometry. */
.image-archive-panel .image-archive-head p,
.image-archive-panel .image-archive-target label > span,
.image-archive-panel .admin-private-kb-manager > summary strong,
.image-archive-panel .admin-private-kb-manager > summary small,
.image-archive-panel .admin-private-kb-body label,
.image-archive-panel .admin-private-kb-body input,
.image-archive-panel .admin-private-kb-empty,
.image-archive-panel .image-archive-target label,
.image-archive-panel .image-archive-settings label,
.image-archive-panel .image-archive-target select,
.image-archive-panel .image-archive-settings input,
.image-archive-panel .image-archive-dropzone strong,
.image-archive-panel .image-archive-dropzone > div > span,
.image-archive-panel .image-archive-switches label,
.image-archive-panel .image-archive-file-strip,
.image-archive-panel .image-archive-local-preview small,
.image-archive-panel .image-archive-actions em,
.image-archive-panel .image-archive-draft-body > header strong,
.image-archive-panel .image-archive-draft-body > header small,
.image-archive-panel .image-archive-draft-body > header em,
.image-archive-panel .image-archive-edit-grid label,
.image-archive-panel .image-archive-edit-grid input,
.image-archive-panel .image-archive-edit-grid textarea,
.image-archive-panel .image-archive-inline-error,
.image-archive-panel .image-archive-draft footer label,
.image-archive-panel .image-archive-draft footer > small,
.image-archive-panel .image-archive-search > header strong,
.image-archive-panel .image-archive-search > header span,
.image-archive-panel .image-archive-search input,
.image-archive-panel .image-archive-result strong,
.image-archive-panel .image-archive-result p,
.image-archive-panel .image-archive-result small,
.image-archive-panel .image-archive-empty,
.image-archive-panel .knowledge-alert,
.image-archive-panel .knowledge-scope-note strong,
.image-archive-panel .knowledge-scope-note span {
  font-size: 11px;
}

.image-archive-panel .knowledge-file-picker,
.image-archive-panel .image-archive-actions :is(.outline-button, .run-button),
.image-archive-panel .image-archive-draft footer .outline-button,
.image-archive-panel .image-archive-result .outline-button {
  font-size: 11px;
}

.image-archive-panel .image-archive-search input::placeholder {
  font-size: 11px;
}

.image-archive-panel .admin-private-kb-body input,
.image-archive-panel .image-archive-target select,
.image-archive-panel .image-archive-settings input,
.image-archive-panel .image-archive-search input,
.image-archive-panel .image-archive-edit-grid input {
  height: 31px;
  line-height: 1.2;
}

.image-archive-panel .image-archive-edit-grid textarea {
  height: 54px;
  min-height: 54px;
  line-height: 1.2;
}

@media (max-width: 720px) {
  .admin-private-kb-body form { grid-template-columns: 1fr; align-items: stretch; }
  .admin-private-kb-body form .icon-button { justify-self: end; }
  .image-archive-head { flex-direction: column; }
  .image-archive-target { width: 100%; max-width: none; }
  .image-archive-upload-grid, .image-archive-search form { grid-template-columns: minmax(0, 1fr); }
  .image-archive-search form > input:first-child { grid-column: auto; }
  .image-archive-switches, .image-archive-edit-grid { grid-template-columns: minmax(0, 1fr); }
  .image-archive-edit-grid .span-2 { grid-column: auto; }
  .image-archive-dropzone { grid-template-columns: 26px minmax(0, 1fr); padding: 11px; }
  .image-archive-dropzone > svg { width: 22px; height: 22px; }
  .image-archive-draft { grid-template-columns: minmax(0, 1fr); }
  .image-archive-preview { width: 100%; max-height: 240px; aspect-ratio: 4 / 3; }
  .image-archive-actions > :is(button, em) { width: 100%; justify-content: center; margin-left: 0; text-align: center; }
  .image-archive-result { grid-template-columns: 44px minmax(0, 1fr); }
  .image-archive-result .outline-button { grid-column: 1 / -1; justify-content: center; }
}
.settings-storage-layout { width: 100%; max-width: none; gap: 12px; }
/* 两列容器：每列是独立的纵向流，列内卡片间距 12px；
   窄屏（未触发宽屏两列时）两列会纵向堆叠，列内间距同样生效。 */
.settings-storage-columns { display: flex; flex-direction: column; gap: 12px; }
/* 模型配置页：两列容器在 settings-form 内部（不是 .settings-list 的根元素），
   所以上面那条 .settings-list.settings-storage-layout.settings-storage-columns 匹配不到，
   这里单独补一条，保证两个方案并排铺满。 */
.settings-form > .settings-storage-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; width: 100%; }
@media (max-width: 1279px) { .settings-form > .settings-storage-columns { grid-template-columns: minmax(0, 1fr); } }
.settings-storage-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.settings-storage-section { padding: 0; overflow: hidden; }
.settings-storage-section > summary { list-style: none; }
.settings-storage-section > summary::-webkit-details-marker, .settings-storage-subsection > summary::-webkit-details-marker { display: none; }
.settings-storage-summary { min-height: 74px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 15px 16px; cursor: pointer; }
.settings-storage-section[open] .settings-storage-summary { border-bottom: 1px solid var(--soft-line); }
.settings-storage-summary-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--cyan); background: #eef8f7; border: 1px solid rgba(30,158,170,.16); border-radius: 7px; }
.settings-storage-summary-icon svg { width: 18px; height: 18px; }
.settings-storage-summary-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.settings-storage-summary-copy strong { color: var(--ink); font-size: 13px; font-weight: 900; }
.settings-storage-summary-copy small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.settings-storage-summary em { min-width: 0; max-width: 180px; overflow: hidden; color: var(--cyan); font-size: 10px; font-style: normal; font-weight: 900; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.settings-storage-summary-chevron { color: var(--muted); transition: transform .18s; }
.settings-storage-section[open] .settings-storage-summary-chevron { transform: rotate(180deg); }
.settings-storage-section-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.storage-section-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--soft-line); }
.storage-section-title { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.storage-section-title h3 { margin: 0; color: var(--ink); font-size: 13px; font-weight: 900; }
.storage-section-title h3 em { margin-left: 8px; color: var(--cyan); font-size: 9px; font-style: normal; font-weight: 850; white-space: nowrap; }
.storage-section-title small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.storage-section-side { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.storage-section-side > strong { color: var(--cyan); font-size: 10px; font-weight: 900; white-space: nowrap; }
.storage-section-side > div { display: flex; align-items: center; gap: 7px; }
.storage-section-side .run-button { min-height: 32px; padding: 0 10px; white-space: nowrap; }
.storage-mini-row, .storage-readonly-path-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .82fr); align-items: center; gap: 12px; padding: 10px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.storage-mini-row > div, .storage-readonly-path-row > div { min-width: 0; }
.storage-mini-row strong, .storage-readonly-path-row strong { display: block; color: var(--ink); font-size: 10px; }
.storage-mini-row span, .storage-readonly-path-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.knowledge-storage-safety-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; color: #47676c; background: #f1f8f7; border: 1px solid #d4e8e5; border-radius: 7px; font-size: 9px; line-height: 1.5; }
.knowledge-storage-safety-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.storage-mini-value { min-width: 0; display: flex !important; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 0 !important; color: var(--cyan) !important; }
.storage-mini-value strong { min-width: 0; overflow: hidden; color: var(--cyan); font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.storage-mini-value.code strong, .storage-readonly-path-row code { font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
.storage-path-input-row { min-width: 0; display: grid !important; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.storage-path-label { min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
.storage-path-label strong { color: var(--ink); font-size: 10px; }
.storage-path-label small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.storage-path-control { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; align-items: center; }
.storage-path-control input { min-width: 0; }
/* 只作用于 renderPathInputRow 渲染的三行（用户资产根目录 / 自定义图片资产路径 / 知识库根目录）：
   注释区（左列）加宽一倍 —— 180-230px → 360-460px，让那几段 60+ 字的说明能在两行内排完、不掉到第三行；
   （宽屏 ≥1280px 下另有一条同值规则，见下方 @media (min-width: 1280px) 块，两处必须保持一致。）
   编辑框取右列宽的 60%（在 40% 基础上加长 50%）并靠右对齐、整行留白收到 80%；注释**完整显示**，不做截断。
   用 --compact 修饰类而不是改上面的通用规则，避免波及“用户存储授权范围 / Agent 可写目录”等其它行。 */
.storage-path-input-row--compact { grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); padding: 8px; gap: 10px; }
/* 靠右对齐：编辑框右边缘固定不动，宽度由 40% 加到 60%，等于**向左**加长（选择按钮仍贴着最右） */
.storage-path-input-row--compact .storage-path-control { grid-template-columns: minmax(0, 60%) 32px; justify-content: end; }
.storage-path-input-row--compact .storage-path-label { gap: 3px; }
/* 注释完整显示，只把行距收紧一点 */
.storage-path-input-row--compact .storage-path-label small { line-height: 1.3; }
.storage-folder-btn { width: 32px; height: 32px; }
.storage-directory-dialog { width: min(680px, calc(100vw - 40px)); }
.storage-directory-toolbar { min-width: 0; display: grid; grid-template-columns: 32px 32px minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.storage-directory-toolbar .asset-mini-btn { width: 32px; height: 32px; }
.storage-directory-toolbar .outline-button { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; }
.storage-directory-toolbar .outline-button svg { width: 13px; height: 13px; }
.storage-directory-list { min-height: 240px; max-height: min(50vh, 420px); display: flex; flex-direction: column; gap: 4px; padding: 6px; overflow: auto; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.storage-directory-item { width: 100%; min-height: 34px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 7px; padding: 0 9px; color: var(--ink); background: #ffffff; border: 1px solid transparent; border-radius: 6px; cursor: pointer; text-align: left; }
.storage-directory-item:hover { background: #eef8f7; border-color: rgba(30,158,170,.3); }
.storage-directory-item svg { width: 14px; height: 14px; color: var(--cyan); }
.storage-directory-item svg:last-child { width: 12px; height: 12px; color: var(--muted); }
.storage-directory-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; }
.storage-directory-state { min-height: 220px; display: grid; place-items: center; color: var(--muted); font-size: 10px; }
.asset-empty-warning { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.asset-empty-warning strong { color: #a75a17; font-size: 11px; }
.asset-empty-warning span { max-width: 520px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.settings-storage-subsection { min-width: 0; padding: 0; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 7px; overflow: hidden; }
.settings-storage-subsection > summary { min-height: 42px; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) 16px; align-items: center; gap: 8px; padding: 0 10px; cursor: pointer; list-style: none; border-bottom: 1px solid transparent; }
.settings-storage-subsection[open] > summary { border-bottom-color: var(--soft-line); }
.settings-storage-subsection > summary span { color: var(--ink); font-size: 10px; font-weight: 900; }
.settings-storage-subsection > summary small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.settings-storage-subsection > summary svg { color: var(--muted); transition: transform .18s; }
.settings-storage-subsection[open] > summary svg { transform: rotate(180deg); }
.storage-inline-subhead { min-height: 42px; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--soft-line); }
.storage-inline-subhead span { color: var(--ink); font-size: 10px; font-weight: 900; }
.storage-inline-subhead small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.storage-path-list { display: flex; flex-direction: column; gap: 7px; padding: 10px; }
.storage-readonly-path-row { grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr) 30px; padding: 8px 9px; background: #ffffff; }
.storage-readonly-path-row code { min-width: 0; overflow: hidden; color: var(--cyan); font-size: 9px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.agent-write-roots-editor { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed var(--soft-line); border-radius: 7px; background: #fbfdfd; }
.agent-write-root-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 8px; }
.agent-write-root-row .storage-path-control { min-width: 0; display: flex; align-items: center; gap: 6px; }
.agent-write-root-row input { min-width: 0; flex: 1; }
.agent-write-root-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 4px; }
.agent-write-root-actions small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.agent-effective-write-root-row code { user-select: all; }

@media (min-width: 1280px) {
  /* 左右两列各自独立的纵向流：列内卡片紧密排列，不会被另一列的行高撑开空档。 */
  .settings-list.settings-storage-layout.settings-storage-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
  .settings-storage-layout .storage-path-input-row { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); }
  /* 上面这条把路径行的注释列压到 180-230px，那三行 60+ 字的说明就会掉到第三行。
     这里给 --compact 三行单独指定宽度（选择器多一个类，特异性压过上面那条），
     数值与文件上方 .storage-path-input-row--compact 保持一致。 */
  .settings-storage-layout .storage-path-input-row--compact { grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); }
  .settings-storage-layout .storage-readonly-path-row { grid-template-columns: minmax(0, 1fr) minmax(180px, .9fr) 30px; }
  .settings-storage-layout .settings-storage-pool-section .admin-storage-pool-create { grid-template-columns: minmax(120px, .55fr) minmax(0, 1.45fr) auto; }
  /* 中等紧凑：内边距约减 1/3，卡片间距收紧 */
  .settings-storage-layout .settings-storage-section-body { padding: 10px 11px; gap: 8px; }
  .settings-storage-layout .settings-form { padding: 11px; gap: 9px; }
}
.storage-admin-panel { display: flex; flex-direction: column; gap: 7px; }
.admin-storage-pool-create { min-width: 0; display: grid; grid-template-columns: minmax(150px, .55fr) minmax(260px, 1.45fr) auto; align-items: end; gap: 9px; padding: 10px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.admin-storage-pool-create > label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.admin-storage-pool-create input { width: 100%; min-width: 0; height: 34px; padding: 0 9px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 5px; outline: none; font-size: 10px; }
.admin-storage-pool-create input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.1); }
.admin-storage-pool-create > .run-button { min-height: 34px; white-space: nowrap; }
.admin-storage-pool-note { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; color: #47676c; background: #f1f8f7; border: 1px solid #d4e8e5; border-radius: 7px; font-size: 9px; line-height: 1.5; }
.admin-storage-pool-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--cyan); }
.admin-storage-pool-note code { color: #2f7075; font-size: 9px; font-weight: 800; }
.admin-storage-pool-list { display: flex; flex-direction: column; gap: 7px; }
.admin-storage-pool-row { min-width: 0; min-height: 62px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 10px; background: #fff; border: 1px solid var(--soft-line); border-radius: 7px; }
.admin-storage-pool-row.is-disabled { opacity: .72; background: #fafafa; }
.admin-storage-pool-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #397866; background: #edf7f3; border-radius: 6px; }
.admin-storage-pool-row.is-disabled .admin-storage-pool-icon { color: var(--muted); background: #f0f2f2; }
.admin-storage-pool-icon svg { width: 15px; height: 15px; }
.admin-storage-pool-copy { min-width: 0; }
.admin-storage-pool-copy strong, .admin-storage-pool-copy code, .admin-storage-pool-copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-storage-pool-copy strong { color: var(--ink); font-size: 10px; }
.admin-storage-pool-copy code { margin-top: 4px; color: var(--cyan); font-size: 9px; }
.admin-storage-pool-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.admin-storage-pool-status { color: #397866; font-size: 9px; font-weight: 900; white-space: nowrap; }
.admin-storage-pool-row.is-disabled .admin-storage-pool-status { color: var(--muted); }
.admin-storage-pool-row > .outline-button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; }
.admin-storage-pool-row > .outline-button.danger { color: #a94742; border-color: #e4c4c1; background: #fff8f7; }
.admin-storage-pool-empty { min-height: 90px; }
@media (max-width: 860px) {
  .admin-storage-pool-create { grid-template-columns: 1fr; }
  .admin-storage-pool-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .admin-storage-pool-row > .outline-button { grid-column: 2 / -1; justify-self: end; }
}
.admin-user-list { display: flex; flex-direction: column; gap: 7px; }
/* 用户审核行：高度压到约原来的 60%。
   注意必须连写 .settings-row 提高特异性 —— 否则会被后面 .settings-row 的
   padding: 15px 16px（在更靠后的位置）覆盖，行高一点都不会变。 */
.settings-row.admin-user-row { min-height: 29px; padding: 5px 9px; }
/* 行内「通过 / 禁用」按钮：高度缩到原来的 70%（全局 .run-button 是 34px → 24px ≈ 70%） */
.admin-user-row .run-button { height: 24px; min-height: 24px; padding: 0 7px; }
.storage-subhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 0 8px; border-bottom: 1px solid var(--soft-line); }
.storage-subhead h3 { margin: 5px 0 0; color: var(--ink); font-size: 13px; }
.admin-user-list { display: flex; flex-direction: column; gap: 7px; }
.admin-user-row { align-items: center; }
.settings-row > .admin-user-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; max-width: 50%; }
.admin-user-actions .settings-value { max-width: none; white-space: nowrap; }
.admin-user-actions .run-button { height: 24px; min-height: 24px; padding: 0 7px; }
.settings-help { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.settings-custom-layout { display: grid; gap: 12px; width: 100%; }
.custom-settings-panel { width: 100%; }
.custom-settings-panel.focus { border-color: rgba(30,158,170,.34); box-shadow: 0 0 0 3px rgba(30,158,170,.08); }
.custom-tool-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.custom-tool-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--soft-line); border-radius: 7px; background: #fbfdfd; }
.custom-tool-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.custom-tool-group-head strong { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 11px; }
.custom-tool-group-head span { color: var(--muted); font-size: 10px; font-weight: 800; }
.custom-tool-slots { display: grid; gap: 7px; }
/* 模型配置页：两个 Agent 方案并排两列（自定义页是三列，这里两列），窄屏自动单列 */
.custom-tool-group-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 这一页内容不多，行距比自定义页放大一倍（7px → 14px），只作用于本页 */
[data-agent-model-body] .custom-tool-slots { gap: 14px; }
/* Agent 行：左=图标+名称，中=模型下拉，右=「已单独调整」备注。
   选择器要带 .custom-tool-slots 前缀，否则会被下面的 .custom-tool-slots label 规则覆盖。 */
.custom-tool-slots label.model-agent-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(280px, 1.5fr) 84px; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 800; width: 100%; }
/* 带推理强度下拉的 Agent 行（「模型配置」页的 Agent 方案默认模型）：4 列 = 名称 | 模型 | 推理强度 | 备注。
   模型列收窄，让「已单独调整」与两个下拉保持同排、不被挤到下一行。
   只作用于 .has-thinking 行：一键 Wiki 配置的行仍是 3 列，布局不受影响。 */
.custom-tool-slots label.model-agent-row.has-thinking { grid-template-columns: minmax(104px, 1fr) minmax(150px, 1.4fr) 92px 84px; gap: 8px; }
/* 所有行的下拉框宽度/样式统一 */
.custom-tool-slots label.model-agent-row select { width: 100%; min-width: 0; }
/* 备注位：固定 84px 宽度。被单独调整过才写「已单独调整」，否则保持空白（宽度仍然占位）。 */
.custom-tool-slots label.model-agent-row > .model-agent-note { display: block; width: 84px; text-align: right; }
/* 备用行的箭头图标缩小到 70% */
.custom-tool-slots label.model-agent-row .model-agent-name > i { width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; }
.custom-tool-slots label.model-agent-row .model-agent-name > i svg { width: 70%; height: 70%; }
/* 模型配置页：生图工具区与上方 Agent 模型之间的横向分割线 */
.model-section-divider { height: 1px; margin: 4px 0 0; background: var(--soft-line, #e5e7eb); }
.model-agent-name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.model-agent-name > i { flex: none; }
.model-agent-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-agent-note { flex: none; color: var(--muted); font-size: 9px; font-weight: 600; white-space: nowrap; }
.custom-tool-slots label, .custom-mouse-grid label { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.custom-tool-slots select, .custom-mouse-grid select { min-width: 0; }
.custom-mouse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.run-button.secondary { color: var(--cyan); background: #eef8f7; border: 1px solid rgba(30,158,170,.24); }
.run-button.danger, .run-button.secondary.danger { color: #b2403d; background: #fff3f1; border-color: rgba(178,64,61,.26); }
.workflow-field-table { display: flex; flex-direction: column; gap: 8px; }
.workflow-field-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 28px; gap: 6px; align-items: end; padding: 8px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.workflow-field-row label { min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.workflow-field-row label span { white-space: nowrap; }
.workflow-field-row input, .workflow-field-row select { height: 30px; min-width: 0; font-size: 9px; }
.workflow-field-row .field-options { min-width: 0; grid-column: span 2; }
.workflow-field-row > .icon-button { grid-column: 5; grid-row: 1; align-self: end; }
.comfy-workflow-studio .comfy-workflow-manager { gap: 14px; padding: 14px; }
.workflow-studio-head { align-items: center; }
.workflow-head-side { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.workflow-head-stats { min-width: 190px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.workflow-head-stats span { color: var(--muted); font-size: 9px; font-weight: 800; white-space: nowrap; }
.workflow-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.workflow-head-actions .run-button { min-height: 34px; white-space: nowrap; }
.workflow-autosave-status { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: #567077; background: #f7faf9; border: 1px solid var(--line); border-radius: 6px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.workflow-autosave-status svg { width: 13px; height: 13px; }
.workflow-autosave-status[data-state="pending"], .workflow-autosave-status[data-state="saving"] { color: #8a6811; background: #fffaf0; border-color: #ead9a9; }
.workflow-autosave-status[data-state="saved"] { color: #11747c; background: #edf9f8; border-color: rgba(30,158,170,.3); }
.workflow-autosave-status[data-state="error"] { color: #b13a35; background: #fff4f3; border-color: #efc4c0; }
.workflow-top-grid { display: grid; grid-template-columns: minmax(320px, .92fr) minmax(340px, 1.08fr); gap: 12px; align-items: stretch; }
.workflow-category-title-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: 10px; align-items: center; }
.workflow-title-import-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 10px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 8px; }
.workflow-category-title-row .workflow-title-import-row { min-width: 0; gap: 8px; align-items: center; padding: 0; background: transparent; border: 0; border-radius: 0; }
.workflow-title-select { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.workflow-category-title-row .workflow-title-select { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; }
.workflow-title-select span { color: var(--ink); font-size: 10px; font-weight: 900; }
.workflow-category-title-row .workflow-title-select span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.workflow-title-select select { min-width: 0; height: 34px; }
.workflow-import-inline { min-width: 150px; display: flex; justify-content: flex-end; align-items: end; }
.workflow-category-title-row .workflow-import-inline { min-width: 116px; align-items: center; }
.workflow-import-inline .run-button { min-height: 34px; white-space: nowrap; }
.workflow-import-file-input { position: fixed; width: 1px !important; height: 1px !important; overflow: hidden; opacity: 0; pointer-events: none; }
.workflow-selector-panel, .workflow-import-panel { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 8px; }
.workflow-import-target { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; background: #ffffff; border: 1px solid var(--line); border-radius: 6px; }
.workflow-import-target span { color: var(--muted); font-size: 9px; font-weight: 800; }
.workflow-import-target strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.comfy-workflow-studio .comfy-import-grid { grid-template-columns: minmax(180px, 1fr) minmax(130px, 180px) minmax(180px, .9fr); align-items: end; }
.workflow-selector-list { max-height: 170px; display: flex; flex-direction: column; gap: 6px; overflow: auto; padding-right: 2px; }
.workflow-list-button { width: 100%; min-width: 0; min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 9px; color: var(--muted); background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; cursor: pointer; text-align: left; }
.workflow-list-button:hover, .workflow-list-button.active { color: var(--ink); background: #eef8f7; border-color: rgba(30,158,170,.34); }
.workflow-list-button span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.workflow-list-button strong, .workflow-list-button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-list-button strong { color: inherit; font-size: 10px; }
.workflow-list-button small { color: var(--muted); font-size: 8px; }
.workflow-list-button em { color: var(--faint); font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.workflow-title-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 2px; }
.workflow-editor-core { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
.workflow-node-config-form, .workflow-runtime-panel { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 8px; }
.workflow-node-config-form.readonly { background: #fbfdfd; }
.workflow-node-config-form > label, .workflow-policy-panel > label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.workflow-canvas-title-field input { max-width: 520px; }
.workflow-node-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; align-items: start; }
.workflow-node-column, .workflow-node-manual-row { min-width: 0; display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
.workflow-node-manual-row, .workflow-node-grid > .workflow-structure-empty { grid-column: 1 / -1; }
.workflow-node-grid .workflow-structure-node { min-width: 0; }
.workflow-node-grid .workflow-structure-node summary { min-height: 34px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; padding: 0 8px; }
.workflow-node-grid .workflow-structure-node summary::before { grid-column: 1; justify-self: start; }
.workflow-node-grid .workflow-node-main { grid-column: 2; text-align: center; }
.workflow-node-grid .workflow-node-main strong { font-size: 9px; }
.workflow-node-grid .workflow-node-main span { margin-top: 1px; font-size: 7.5px; }
.workflow-node-grid .workflow-node-meta { grid-column: 3; gap: 1px; font-size: 7.5px; }
.workflow-node-grid .workflow-node-inputs { gap: 5px; padding: 0 7px 7px 18px; }
.workflow-node-grid .workflow-input-row { min-height: 30px; padding: 5px 7px; }
.workflow-node-grid .workflow-input-toggle-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
.workflow-expose-checkbox { width: 13px; height: 13px; accent-color: var(--cyan); cursor: pointer; }
.workflow-input-row > .workflow-expose-checkbox { justify-self: start; }
.workflow-node-kind-unet { border-left: 3px solid #8b5cf6; background: #fbf8ff; }
.workflow-node-kind-unet summary::before { border-left-color: #8b5cf6; }
.workflow-node-kind-image { border-left: 3px solid #1e9eaa; background: #f4fbfa; }
.workflow-node-kind-image summary::before { border-left-color: #1e9eaa; }
.workflow-node-kind-text { border-left: 3px solid #c48a2a; background: #fffaf0; }
.workflow-node-kind-text summary::before { border-left-color: #c48a2a; }
.workflow-node-kind-ksampler { border-left: 3px solid #3f6fd9; background: #f6f9ff; }
.workflow-node-kind-ksampler summary::before { border-left-color: #3f6fd9; }
.workflow-param-add { min-width: 72px; justify-content: center; }
.workflow-param-checkbox { width: 11px; height: 11px; display: inline-block; border: 1px solid currentColor; border-radius: 3px; background: #ffffff; }
.workflow-param-editor { display: flex; flex-direction: column; gap: 5px; align-items: stretch; padding: 6px; }
.workflow-param-title { min-width: 0; min-height: 30px; display: flex; align-items: center; padding: 5px 7px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.workflow-field-checkline { min-width: 0; width: 100%; display: grid !important; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 7px; color: var(--muted); font-size: 8px; font-weight: 800; }
.workflow-field-checkline span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.workflow-field-checkline strong, .workflow-field-checkline small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-field-checkline strong { color: var(--ink); font-size: 9px; }
.workflow-field-checkline small { color: var(--muted); font-size: 7.5px; }
.workflow-param-fields { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.workflow-param-fields label { min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 7.5px; font-weight: 800; }
.workflow-param-fields label span { white-space: nowrap; }
.workflow-param-fields input, .workflow-param-fields select { height: 28px; min-width: 0; font-size: 8.5px; }
.workflow-param-fields .field-options { grid-column: 1 / -1; }
.workflow-param-range { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(62px, 1fr)); gap: 5px; padding-top: 6px; border-top: 1px solid var(--soft-line); }
.workflow-param-range-head { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workflow-param-range-head span { color: var(--ink); font-size: 8px; font-weight: 900; }
.workflow-param-range-head small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 7px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.workflow-param-range.invalid { border-top-color: #e6b7b7; }
.workflow-param-range.invalid input { color: #8f3434; border-color: #dda6a6; background: #fffafa; }
.workflow-param-range-error { grid-column: 1 / -1; color: #a63f3f; font-size: 7.5px; font-weight: 800; line-height: 1.4; }
.workflow-dropdown-options { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.workflow-dropdown-options > span { color: var(--muted); font-size: 7.5px; font-weight: 900; }
.workflow-dropdown-option-head { min-width: 0; display: grid; grid-template-columns: 18px minmax(72px, .7fr) minmax(110px, 1.3fr) 24px; align-items: center; gap: 5px; padding: 0 5px; color: var(--muted); font-size: 7px; font-weight: 800; }
.workflow-dropdown-option-list { display: flex; flex-direction: column; gap: 5px; }
.workflow-dropdown-option-row { min-width: 0; display: grid; grid-template-columns: 18px minmax(72px, .7fr) minmax(110px, 1.3fr) 24px; align-items: center; gap: 5px; padding: 5px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.workflow-dropdown-option-row em { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 900; text-align: center; }
.workflow-dropdown-option-row input { height: 26px; padding: 0 7px; }
.workflow-dropdown-option-row .icon-button { width: 22px; height: 22px; }
.workflow-option-add-button { width: max-content; height: 26px; padding: 0 8px; font-size: 8px; }
.workflow-option-add-button svg { width: 12px; height: 12px; }
.workflow-param-editor .workflow-param-binding { min-width: 0; grid-row: span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 8px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.workflow-param-binding span { color: #1b858b; font-size: 8px; font-weight: 900; }
.workflow-param-binding span input { width: 12px; height: 12px; margin: 0 4px 0 0; vertical-align: -2px; }
.workflow-param-binding strong, .workflow-param-binding small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-param-binding strong { color: var(--ink); font-size: 9px; }
.workflow-param-binding small { color: var(--muted); font-size: 8px; }
.workflow-node-inputs .workflow-param-editor .workflow-param-binding { grid-column: 1 / -1; grid-row: auto; }
.workflow-param-editor.readonly { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.workflow-param-readonly { display: flex; gap: 6px; align-items: center; justify-content: flex-end; color: var(--muted); font-size: 8px; font-weight: 800; }
.workflow-param-readonly span, .workflow-param-readonly em { min-height: 24px; display: inline-flex; align-items: center; padding: 0 7px; background: #f6f9fa; border: 1px solid var(--soft-line); border-radius: 5px; font-style: normal; white-space: nowrap; }
.workflow-policy-panel { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 8px; }
.workflow-panel-head.compact { padding-bottom: 7px; }
.workflow-save-actions { justify-content: space-between; }
.workflow-runtime-panel { position: sticky; top: 12px; }
.workflow-runtime-preview, .workflow-runtime-test { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.workflow-runtime-test { padding-top: 12px; border-top: 1px solid var(--soft-line); }
.workflow-runtime-panel.workflow-test-form { padding-top: 12px; border-top: 0; }
.workflow-runtime-canvas { grid-template-columns: 1fr; max-height: 620px; overflow: auto; padding: 6px; background: #f2f5f5; border: 1px solid #dce6e6; border-radius: 7px; }
.workflow-runtime-node { --canvas-node-radius: 7px; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; color: var(--ink); background: #ffffff; border: 1px solid #b9d9dc; border-radius: var(--canvas-node-radius); box-shadow: 0 4px 12px rgba(31,52,59,.08); }
.workflow-runtime-node .comfy-node-topbar { min-height: 26px; gap: 6px; padding: 3px 7px 1px; }
.workflow-runtime-node .comfy-topbar-title { gap: 5px; }
.workflow-runtime-node .comfy-topbar-title .node-icon { width: 19px; height: 19px; border-radius: 5px; }
.workflow-runtime-node .comfy-topbar-title .node-icon svg { width: 11px; height: 11px; }
.workflow-runtime-node .comfy-topbar-title strong { font-size: 10px; }
.workflow-runtime-node .comfy-header-actions { gap: 3px; }
.workflow-runtime-node .comfy-header-actions .node-collapse-button { width: 20px; height: 20px; border-radius: 4px; }
.workflow-runtime-node .comfy-header-actions .node-collapse-button svg { width: 10px; height: 10px; }
.workflow-runtime-node .node-run-compact { width: 34px; height: 19px; flex-basis: 34px; border-radius: 4px; font-size: 7px; }
.workflow-runtime-node .comfy-generation-header { min-height: 29px; padding: 2px 7px 6px; }
.workflow-runtime-node .comfy-generation-header .generation-node-selectors { min-width: 0; grid-template-columns: minmax(64px, .38fr) minmax(0, 1fr); gap: 4px; }
.workflow-runtime-node .comfy-generation-header .generation-category-select,
.workflow-runtime-node .comfy-generation-header .generation-workflow-select { min-width: 0; width: 100%; height: 22px; padding: 0 18px 0 6px; background-position: right 5px center; background-size: 9px 9px; border-radius: 4px; font-size: 8px; }
.workflow-runtime-node .comfy-workflow-refresh-button { width: 22px; height: 22px; flex-basis: 22px; border-radius: 4px; }
.workflow-runtime-node .comfy-workflow-refresh-button svg { width: 10px; height: 10px; }
.workflow-runtime-node .comfy-generation-header select:disabled { color: var(--muted); background-color: #ffffff; opacity: 1; }
.workflow-runtime-node .comfy-node-editor,
.workflow-runtime-node .comfy-node-scroll-region,
.workflow-runtime-group-stack { min-width: 0; display: flex; flex-direction: column; }
.workflow-runtime-group { min-width: 0; position: relative; background: #fff; border-top: 1px solid #dce7e7; }
.workflow-runtime-group:first-child { border-top: 0; }
.workflow-runtime-group-head { min-width: 0; min-height: 25px; display: grid; grid-template-columns: 16px 16px minmax(54px, auto) minmax(0, 1fr) 18px; gap: 4px; align-items: center; padding: 3px 5px; color: #41565c; background: #f4f8f8; }
.workflow-runtime-group-head > strong { overflow: hidden; font-size: 8px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.workflow-runtime-drag-handle,
.workflow-runtime-group-toggle { width: 16px; height: 16px; display: grid; place-items: center; padding: 0; color: #789096; background: transparent; border: 0; border-radius: 3px; cursor: pointer; }
.workflow-runtime-drag-handle { cursor: grab; }
.workflow-runtime-drag-handle:active { cursor: grabbing; }
.workflow-runtime-drag-handle:hover,
.workflow-runtime-group-toggle:hover { color: #187f86; background: #e3eeee; }
.workflow-runtime-drag-handle svg,
.workflow-runtime-group-toggle svg { width: 10px; height: 10px; }
.workflow-runtime-group-icon { width: 16px; height: 16px; display: grid; place-items: center; color: #34878c; background: #e6f1f1; border-radius: 3px; }
.workflow-runtime-group-icon svg { width: 9px; height: 9px; }
.workflow-runtime-group-nodes { min-width: 0; display: flex; justify-content: flex-end; gap: 3px; overflow: hidden; }
.workflow-runtime-group-nodes b { min-width: 0; padding: 1px 4px; overflow: hidden; color: #307e83; background: #e7f2f2; border-radius: 3px; font-size: 7px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.workflow-runtime-group-body { min-width: 0; padding: 5px 7px 6px; background: #fff; border-top: 1px dashed #e1e9e9; }
.workflow-runtime-group.dragging { opacity: .55; }
.workflow-runtime-group.drag-over::before { content: ''; position: absolute; z-index: 4; inset: -1px 3px auto; height: 2px; background: var(--cyan); border-radius: 2px; }
.workflow-runtime-node .comfy-detail-section { display: block; }
.workflow-runtime-node .comfy-prompt-grid,
.workflow-runtime-node .comfy-param-grid { display: grid; gap: 4px; }
.workflow-runtime-node .node-edit-grid { gap: 4px; }
.workflow-runtime-node .node-edit-field { min-width: 0; gap: 2px; }
.workflow-runtime-node .node-edit-field > input,
.workflow-runtime-node .node-edit-field > select,
.workflow-runtime-node .node-edit-field > textarea { width: 100%; min-width: 0; height: 23px; min-height: 23px; padding: 3px 6px; border-radius: 4px; font-size: 8px; line-height: 1.2; }
.workflow-runtime-node .node-edit-field > select { padding-right: 18px; background-position: right 5px center; background-size: 9px 9px; }
.workflow-runtime-node .comfy-prompt-field > textarea { height: 28px; min-height: 28px; padding: 4px 6px; overflow: hidden; resize: none; white-space: nowrap; }
.workflow-runtime-node .node-edit-field[draggable="true"],
.workflow-runtime-node .workflow-runtime-seed[draggable="true"],
.workflow-runtime-node .workflow-runtime-check[draggable="true"],
.workflow-runtime-node .compact-fixed-control[draggable="true"],
.workflow-runtime-node .compact-param-field[draggable="true"],
.workflow-runtime-node .workflow-runtime-image-slot[draggable="true"] { cursor: grab; }
.workflow-runtime-node [data-workflow-preview-field].drag-over { outline: 1px solid var(--cyan); outline-offset: 1px; border-radius: 4px; }
.workflow-runtime-node [data-workflow-preview-field].dragging { opacity: .55; }
.workflow-runtime-primary-slot { min-width: 0; min-height: 30px; display: flex; align-items: stretch; }
.workflow-runtime-primary-slot > * { width: 100%; }
.workflow-runtime-primary-slot.drag-over { outline: 1px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.workflow-runtime-field-label { min-width: 0; display: flex !important; align-items: center; gap: 4px; overflow: hidden; line-height: 10px; }
.workflow-runtime-field-label b { min-width: 0; flex: 0 0 auto; color: #1b858b; font-size: 7px; font-weight: 900; white-space: nowrap; }
.workflow-runtime-field-label em { min-width: 0; overflow: hidden; color: inherit; font-size: 7px; font-style: normal; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.workflow-runtime-node .comfy-inline-hint-field > .workflow-runtime-field-label,
.workflow-runtime-node .comfy-inline-hint-field.has-value > .workflow-runtime-field-label { width: 100%; max-width: 100%; display: flex !important; }
.workflow-runtime-node .comfy-inline-hint-field.has-value > .workflow-runtime-field-label em { display: block; }
.workflow-runtime-node .comfy-inline-hint-field.has-value textarea { padding: 4px 6px; }
.workflow-runtime-node .comfy-seed-row { gap: 2px; }
.workflow-runtime-node .comfy-seed-lock { min-height: 11px; gap: 4px; align-items: center; }
.workflow-runtime-node .comfy-seed-lock > span { min-width: 0; }
.workflow-runtime-node .comfy-seed-lock input,
.workflow-runtime-node .workflow-runtime-check > input { width: 10px; height: 10px; flex: 0 0 10px; }
.workflow-runtime-node .comfy-seed-lock .workflow-runtime-field-label,
.workflow-runtime-node .workflow-runtime-check .workflow-runtime-field-label { color: var(--muted); font-size: 7px; font-weight: 750; }
.workflow-runtime-node .comfy-seed-input-wrap { grid-template-columns: minmax(0, 1fr) 22px; gap: 3px; }
.workflow-runtime-node .comfy-seed-input-wrap input { height: 23px; padding: 3px 6px; border-radius: 4px; font-size: 8px; }
.workflow-runtime-node .comfy-seed-input-wrap button { width: 22px; min-width: 22px; height: 23px; border-radius: 4px; }
.workflow-runtime-node .comfy-seed-input-wrap button svg { width: 10px; height: 10px; }
.workflow-runtime-node .workflow-runtime-check { min-width: 0; min-height: 23px; gap: 4px; align-items: center; padding: 0; }
.workflow-runtime-image-slots { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 4px; }
.workflow-runtime-image-slot { min-width: 0; height: 38px; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 5px; align-items: center; padding: 4px 5px; background: #f8fbfb; border: 1px dashed #b9d3d5; border-radius: 4px; }
.workflow-runtime-image-slot-icon { width: 25px; height: 28px; display: grid; place-items: center; color: #4a8f94; background: #e4efef; border-radius: 3px; }
.workflow-runtime-image-slot-icon svg { width: 12px; height: 12px; }
.workflow-runtime-image-slot-copy { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 4px; align-items: center; line-height: 10px; }
.workflow-runtime-image-slot-copy b { color: #1b858b; font-size: 7px; }
.workflow-runtime-image-slot-copy em,
.workflow-runtime-image-slot-copy small { min-width: 0; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.workflow-runtime-image-slot-copy em { color: #33494f; font-size: 8px; font-weight: 800; }
.workflow-runtime-image-slot-copy small { grid-column: 1 / -1; color: #849398; font-size: 7px; }
.workflow-runtime-lora-list { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.workflow-runtime-lora-row { min-width: 0; min-height: 26px; display: grid; grid-template-columns: 28px minmax(70px, .7fr) minmax(88px, 1fr); gap: 5px; align-items: center; padding: 3px 5px; background: #f8fbfb; border: 1px solid #dde7e7; border-radius: 4px; }
.workflow-runtime-lora-row > b { color: #1b858b; font-size: 7px; }
.workflow-runtime-lora-row > span { min-width: 0; overflow: hidden; color: #33494f; font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.workflow-runtime-lora-row label { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 4px; align-items: center; }
.workflow-runtime-lora-row input { width: 100%; min-width: 0; height: 12px; accent-color: var(--cyan); }
.workflow-runtime-lora-row em { color: #667b81; font-size: 7px; font-style: normal; text-align: right; }
.workflow-runtime-lora-empty { padding: 5px; color: var(--muted); background: #f8fbfb; border-radius: 4px; font-size: 8px; }
/* The settings preview uses the canvas node's current compact geometry. */
.workflow-runtime-canvas { display: flex; justify-content: center; align-items: flex-start; grid-template-columns: none; max-height: 700px; padding: 16px; }
.workflow-runtime-node { --canvas-node-radius: 12px; --canvas-node-inner-radius: 12px; width: 420px; min-width: 420px; max-width: 420px; height: 452px; flex: 0 0 420px; box-sizing: border-box; overflow: visible; background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: var(--canvas-node-radius); box-shadow: 0 16px 42px rgba(31,52,59,.12); }
.workflow-runtime-node .node-shell-body { height: 100%; min-height: 0; overflow: hidden; background: inherit; border-radius: inherit; }
.workflow-runtime-node .comfy-node-topbar { min-height: 34px; gap: 10px; padding: 7px 14px 3px; }
.workflow-runtime-node .comfy-topbar-title { gap: 8px; }
.workflow-runtime-node .comfy-topbar-title .node-icon { width: 28px; height: 28px; border-radius: 7px; }
.workflow-runtime-node .comfy-topbar-title .node-icon svg { width: 15px; height: 15px; }
.workflow-runtime-node .comfy-topbar-title strong { font-size: 13px; }
.workflow-runtime-node .comfy-header-actions { gap: 5px; }
.workflow-runtime-node .comfy-header-actions .node-collapse-button,
.workflow-runtime-node .comfy-header-actions .node-delete-button { width: 24px; height: 24px; border-radius: 6px; }
.workflow-runtime-node .comfy-header-actions :is(.node-collapse-button, .node-delete-button) svg { width: 12px; height: 12px; }
.workflow-runtime-node .node-run-compact { width: 42px; height: 24px; flex-basis: 42px; border-radius: 6px; font-size: 9px; }
.workflow-runtime-node .comfy-generation-header { min-height: 44px; gap: 8px; padding: 4px 18px 10px; }
.workflow-runtime-node .comfy-generation-header .generation-node-selectors { grid-template-columns: 86px minmax(0, 1fr); gap: 6px; }
.workflow-runtime-node .comfy-generation-header .generation-category-select,
.workflow-runtime-node .comfy-generation-header .generation-workflow-select { height: 30px; padding: 0 10px; background-position: right 8px center; background-size: 10px 10px; border-radius: 7px; font-size: 11px; }
.workflow-runtime-node .comfy-generation-header .generation-category-select { width: 100%; min-width: 0; }
.workflow-runtime-node .comfy-generation-header .generation-workflow-select { min-width: 0; }
.workflow-runtime-node .comfy-node-editor { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.workflow-runtime-node .comfy-node-scroll-region { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.workflow-runtime-node .comfy-node-scroll-region::-webkit-scrollbar { width: 8px; height: 8px; }
.workflow-runtime-node .comfy-node-scroll-region::-webkit-scrollbar-thumb { background: rgba(98,132,138,.28); border-radius: 999px; }
.workflow-runtime-node .workflow-runtime-group { border-top: 1px solid var(--soft-line); }
.workflow-runtime-node .workflow-runtime-group:first-child { border-top: 0; }
.workflow-runtime-node .workflow-runtime-group-head { min-height: 32px; grid-template-columns: 22px 22px minmax(64px, auto) minmax(0, 1fr) 22px; gap: 5px; padding: 4px 10px; background: #f4f8f8; }
.workflow-runtime-node .workflow-runtime-group-head > strong { font-size: 9px; }
.workflow-runtime-node .workflow-runtime-drag-handle,
.workflow-runtime-node .workflow-runtime-group-toggle { width: 22px; height: 22px; border-radius: 5px; }
.workflow-runtime-node .workflow-runtime-drag-handle svg,
.workflow-runtime-node .workflow-runtime-group-toggle svg { width: 12px; height: 12px; }
.workflow-runtime-node .workflow-runtime-group-icon { width: 22px; height: 22px; border-radius: 5px; }
.workflow-runtime-node .workflow-runtime-group-icon svg { width: 12px; height: 12px; }
.workflow-runtime-node .workflow-runtime-group-nodes { gap: 4px; }
.workflow-runtime-node .workflow-runtime-group-nodes b { min-height: 18px; padding: 3px 6px; border-radius: 4px; font-size: 10px; line-height: 12px; }
.workflow-runtime-node .workflow-runtime-group-body { padding: 0; border-top: 1px dashed #e1e9e9; }
.workflow-runtime-node .workflow-runtime-group-body > .comfy-editor-section { display: block; }
.workflow-runtime-node .node-edit-grid,
.workflow-runtime-node .comfy-prompt-grid,
.workflow-runtime-node .comfy-param-grid { gap: 7px; }
.workflow-runtime-node .node-edit-field { gap: 4px; }
.workflow-runtime-node .node-edit-field > input,
.workflow-runtime-node .node-edit-field > select,
.workflow-runtime-node .node-edit-field > textarea { height: auto; min-height: 0; padding: 6px 7px; border-radius: 5px; font-size: 10px; line-height: 1.45; }
.workflow-runtime-node .node-edit-field > select { min-height: 29px; padding-right: 24px; background-position: right 7px center; background-size: 10px 10px; }
.workflow-runtime-node .node-edit-field > textarea { min-height: 54px; }
.workflow-runtime-node .node-edit-field > input[type="range"] { height: 26px; padding: 0; }
.workflow-runtime-node .comfy-prompt-field > textarea { height: 30px; min-height: 30px; padding: 6px 7px; overflow: hidden; resize: none; white-space: nowrap; }
.workflow-runtime-node .comfy-prompt-section .comfy-inline-hint-field > .workflow-runtime-field-label { left: 9px; top: 6px; width: auto; max-width: calc(100% - 18px); line-height: 18px; }
.workflow-runtime-node .workflow-runtime-field-label { display: flex !important; align-items: center; gap: 5px; line-height: 18px; }
.workflow-runtime-node .workflow-runtime-field-label b { font-size: 10px; }
.workflow-runtime-node .workflow-runtime-field-label em { font-size: 8px; }
.workflow-runtime-node .workflow-runtime-field-label strong { margin-left: auto; color: var(--ink); font-size: 9px; font-weight: 700; }
.workflow-runtime-node .comfy-seed-row { gap: 5px; }
.workflow-runtime-node .comfy-seed-lock { min-height: 18px; gap: 5px; }
.workflow-runtime-node .comfy-seed-lock input,
.workflow-runtime-node .workflow-runtime-check > input { width: 13px; height: 13px; flex-basis: 13px; }
.workflow-runtime-node .comfy-seed-input-wrap { grid-template-columns: minmax(0, 1fr) 24px; gap: 5px; }
.workflow-runtime-node .comfy-seed-input-wrap input { height: auto; padding: 6px 7px; border-radius: 5px; font-size: 10px; }
.workflow-runtime-node .comfy-seed-input-wrap button { width: 24px; min-width: 24px; height: 24px; border-radius: 6px; }
.workflow-runtime-node .comfy-seed-input-wrap button svg { width: 10px; height: 10px; }
.workflow-runtime-node .workflow-runtime-check { min-height: 29px; gap: 5px; align-items: flex-end; padding-bottom: 6px; }
.workflow-runtime-node .workflow-runtime-image-slots { min-height: 38px; display: flex; align-items: flex-start; gap: 5px; padding: 4px; }
.workflow-runtime-node .workflow-runtime-image-slot { width: 34px; height: 34px; flex: 0 0 34px; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 10px; gap: 0; align-items: stretch; padding: 0; border-radius: 6px; }
.workflow-runtime-node .workflow-runtime-image-slot svg { width: 14px; height: 14px; align-self: center; justify-self: center; color: var(--cyan); }
.workflow-runtime-node .workflow-runtime-image-slot b { left: 2px; top: 2px; min-width: 16px; height: 16px; font-size: 8px; }
.workflow-runtime-node .workflow-runtime-image-slot small { font-size: 6px; }
.workflow-runtime-node .workflow-runtime-lora-panel { margin-top: 0; }
.workflow-runtime-node .workflow-runtime-lora-row { min-height: 38px; grid-template-columns: minmax(0, 1fr) minmax(118px, .62fr) 26px; gap: 6px; padding: 4px 5px 4px 8px; border-radius: 6px; }
.workflow-runtime-node .workflow-runtime-lora-row .comfy-lora-name { gap: 5px; font-size: 10px; }
.workflow-runtime-node .workflow-runtime-lora-row .comfy-lora-name b { flex: 0 0 auto; color: var(--cyan); font-size: 8px; }
.workflow-runtime-node .workflow-runtime-lora-row .comfy-lora-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-runtime-node .workflow-runtime-lora-row .comfy-lora-strength { grid-template-columns: minmax(0, 1fr) 30px; gap: 5px; font-size: 10px; }
.workflow-runtime-node .workflow-runtime-lora-row .comfy-lora-strength input { height: auto; }
.workflow-runtime-node .workflow-runtime-lora-row .comfy-lora-strength span { font-size: 10px; }
.workflow-runtime-node .workflow-runtime-lora-empty { padding: 8px; border-radius: 5px; font-size: 10px; }
.workflow-runtime-node.collapsed .workflow-runtime-group:not(.workflow-runtime-group-prompt) { display: none; }
.workflow-runtime-node.collapsed .comfy-node-editor { display: flex; }
.workflow-runtime-node.collapsed { height: auto; }
.workflow-runtime-node .node-run-compact:disabled { opacity: .55; cursor: wait; }
.workflow-runtime-node {
  height: auto;
  min-height: 0;
}
.workflow-runtime-node .node-shell-body {
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.workflow-runtime-node .comfy-node-editor,
.workflow-runtime-node .comfy-node-scroll-region {
  flex: 0 1 auto;
}
.workflow-runtime-node .comfy-node-scroll-region {
  overflow: visible;
}
.workflow-runtime-node .workflow-runtime-group-head {
  min-height: 24px;
  grid-template-columns: 18px 18px minmax(54px, auto) minmax(0, 1fr) 18px;
  gap: 4px;
  padding: 2px 9px;
}
.workflow-runtime-node .workflow-runtime-group-head > strong {
  font-size: 8px;
}
.workflow-runtime-node .workflow-runtime-drag-handle,
.workflow-runtime-node .workflow-runtime-group-toggle {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.workflow-runtime-node .workflow-runtime-drag-handle svg,
.workflow-runtime-node .workflow-runtime-group-toggle svg {
  width: 11px;
  height: 11px;
}
.workflow-runtime-node .workflow-runtime-group-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.workflow-runtime-node .workflow-runtime-group-icon svg {
  width: 11px;
  height: 11px;
}
.workflow-runtime-node .workflow-runtime-group-nodes b {
  min-height: 16px;
  padding: 2px 5px;
  font-size: 8px;
  line-height: 12px;
}
.workflow-runtime-node .workflow-runtime-group-body {
  border-top: 0;
}
.workflow-runtime-node .workflow-runtime-group-body > .comfy-editor-section {
  padding: 10px 18px;
}
.workflow-runtime-node .comfy-prompt-section {
  padding-top: 8px;
  padding-bottom: 8px;
}
.workflow-runtime-node .comfy-prompt-section textarea,
.workflow-runtime-node .comfy-prompt-field > textarea {
  height: var(--comfy-prompt-height, 54px);
  min-height: 54px;
  padding: 24px 7px 6px;
  overflow: auto;
  resize: vertical;
  white-space: normal;
}
.workflow-runtime-node .comfy-prompt-section .comfy-inline-hint-field.has-value textarea {
  padding-top: 6px;
}
.workflow-runtime-node .comfy-first-row-grid {
  margin-bottom: 0;
}
.workflow-runtime-node .workflow-runtime-image-slots {
  min-height: 47px;
  gap: 5px;
  padding: 6px;
}
.workflow-runtime-node .workflow-runtime-image-slot {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) 11px;
  gap: 0;
  align-items: stretch;
  padding: 0;
  border-radius: 8px;
}
.workflow-runtime-node .workflow-runtime-image-slot svg {
  width: 18px;
  height: 18px;
}
.workflow-runtime-node .workflow-runtime-image-slot b {
  left: 3px;
  top: 3px;
  min-width: 13px;
  height: 13px;
  font-size: 7px;
}
.workflow-runtime-node .workflow-runtime-image-slot small {
  font-size: 7px;
}
.workflow-runtime-node .compact-param-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.workflow-runtime-node :is(.compact-fixed-row, .compact-param-row) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--compact-row-gap);
  align-items: center;
}
.workflow-runtime-node .compact-param-row-half {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workflow-runtime-node .compact-param-row-full {
  grid-template-columns: minmax(0, 1fr);
}
.workflow-runtime-canvas .workflow-preview-node { color: #2f4248; background: #e4ebeb; border-color: #cad8d8; box-shadow: 0 10px 20px rgba(31,52,59,.08); }
.workflow-runtime-canvas .workflow-preview-node.drag-over { outline: 2px solid var(--cyan); outline-offset: 2px; }
.workflow-runtime-canvas .workflow-preview-title { color: #273b41; background: #dbe5e5; border-color: #c7d5d5; cursor: grab; }
.workflow-runtime-canvas .workflow-preview-title span { display: inline-flex; align-items: center; gap: 5px; }
.workflow-runtime-canvas .workflow-preview-title svg { width: 12px; height: 12px; color: #4f8589; }
.workflow-runtime-canvas .workflow-preview-field { grid-template-columns: 12px minmax(0, 1fr); align-items: start; background: #f8fbfb; }
.workflow-runtime-canvas .workflow-preview-field strong { grid-column: 2; color: var(--ink); font-size: 9px; }
.workflow-runtime-canvas .workflow-preview-field input, .workflow-runtime-canvas .workflow-preview-field select, .workflow-runtime-canvas .workflow-preview-field textarea { grid-column: 2; width: 100%; min-width: 0; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 5px; font-size: 9px; }
.workflow-runtime-canvas .workflow-preview-field input, .workflow-runtime-canvas .workflow-preview-field select { height: 30px; padding: 0 8px; }
.workflow-runtime-canvas .workflow-preview-field textarea { min-height: 58px; padding: 7px 8px; resize: vertical; }
.workflow-runtime-canvas .workflow-preview-field.check { grid-template-columns: 12px auto minmax(0, 1fr); align-items: center; }
.workflow-runtime-canvas .workflow-preview-field.check input { grid-column: 2; width: 14px; height: 14px; padding: 0; }
.workflow-runtime-canvas .workflow-preview-field.check strong { grid-column: 3; }
.workflow-runtime-canvas .workflow-preview-field.slider input { padding: 0; }
.workflow-runtime-canvas.workflow-preview-field-list { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow: auto; background: #f2f5f5; }
.workflow-preview-field-row { min-width: 0; min-height: 34px; display: grid; grid-template-columns: minmax(108px, .54fr) minmax(0, 1fr); gap: 7px; align-items: center; padding: 5px 6px; color: #2f4248; background: #e5ecec; border: 1px solid #cbd8d8; border-radius: 6px; cursor: grab; }
.workflow-preview-field-row.drag-over { outline: 2px solid var(--cyan); outline-offset: 2px; }
.workflow-preview-field-row.dragging { opacity: .72; }
.workflow-preview-field-meta { min-width: 0; display: grid; grid-template-columns: 13px auto minmax(0, 1fr); align-items: center; gap: 5px; }
.workflow-preview-field-meta svg { width: 11px; height: 11px; color: #5f8f93; }
.workflow-preview-field-meta strong { color: #263a40; font-size: 9px; white-space: nowrap; }
.workflow-preview-field-meta em { min-width: 0; overflow: hidden; color: #4c6268; font-size: 9px; font-style: normal; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.workflow-preview-field-row > input, .workflow-preview-field-row > select { width: 100%; min-width: 0; height: 28px; padding: 0 8px; color: #24363b; background: #fbfdfd; border: 1px solid #c9d5d5; border-radius: 5px; font-size: 9px; }
.workflow-preview-field-row > input[type="range"] { padding: 0; }
.workflow-preview-check { min-width: 0; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; color: #24363b; background: #fbfdfd; border: 1px solid #c9d5d5; border-radius: 5px; font-size: 9px; font-weight: 800; }
.workflow-preview-check input { width: 13px; height: 13px; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.25 4.5L6 7.25L8.75 4.5' stroke='%23738089' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px 12px; padding-right: 28px; }
select::-ms-expand { display: none; }
.agent-studio { width: 100%; min-height: 0; height: 100%; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.agent-runtime-bar { min-height: 58px; display: grid; grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(31,52,59,.05); }
.agent-runtime-state { min-width: 0; display: flex; align-items: center; gap: 10px; }
.agent-runtime-state strong, .agent-runtime-state small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-state strong { color: var(--ink); font-size: 12px; }
.agent-runtime-state small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.agent-runtime-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 999px; background: #93a2a6; box-shadow: 0 0 0 4px rgba(147,162,166,.12); }
.agent-runtime-state.online .agent-runtime-dot { background: #2f9e62; box-shadow: 0 0 0 4px rgba(47,158,98,.13); }
.agent-runtime-state.ready .agent-runtime-dot { background: #1e9eaa; box-shadow: 0 0 0 4px rgba(30,158,170,.13); }
.agent-runtime-state.working .agent-runtime-dot { background: #c98d2d; box-shadow: 0 0 0 4px rgba(201,141,45,.15); }
.agent-runtime-state.error .agent-runtime-dot { background: #b84c58; box-shadow: 0 0 0 4px rgba(184,76,88,.13); }
.agent-runtime-paths { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agent-runtime-paths span { min-width: 0; max-width: 260px; height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; overflow: hidden; color: #557176; background: #f5f9f9; border: 1px solid var(--soft-line); border-radius: 6px; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-paths svg { width: 13px; height: 13px; flex: 0 0 auto; color: #2f8d94; }
.agent-runtime-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.agent-alert { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 10px; line-height: 1.45; }
.agent-alert svg { width: 15px; height: 15px; flex: 0 0 auto; }
.agent-alert.error { color: #8d2f3d; background: #fff3f3; border: 1px solid #f1c9cc; }
.agent-main-grid { min-height: 0; height: 100%; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 12px; }
.agent-main-grid.is-side-collapsed { grid-template-columns: minmax(0, 1fr) 42px; }
.agent-main-panel { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.agent-task-banner-wrap { position: absolute; z-index: 32; top: 8px; right: 8px; left: 8px; pointer-events: none; }
.agent-task-banner-wrap:empty { display: none; }
.agent-task-banner { width: 100%; min-height: 36px; display: grid; grid-template-columns: 16px minmax(0, 1fr) 14px; align-items: center; gap: 8px; margin: 0; padding: 7px 10px; color: #52686d; background: #fff9ed; border: 1px solid #ead7ae; border-radius: 7px; box-shadow: 0 4px 14px rgba(46, 62, 67, .09); text-align: left; pointer-events: auto; cursor: pointer; }
.agent-task-banner:hover { border-color: #d7bb7e; background: #fff6e2; }
.agent-task-banner.is-complete { color: #285f4b; background: #edf8f2; border-color: #bedfce; }
.agent-task-banner.is-complete:hover { background: #e5f5ed; border-color: #91c8ab; }
.agent-task-banner span { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.agent-task-banner svg { width: 14px; height: 14px; }
.agent-task-banner > svg:last-child { justify-self: end; }
.agent-task-banner.is-working > svg:first-child { animation: agent-spin .9s linear infinite; }
.agent-setup { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; align-items: stretch; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.agent-setup-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.agent-kicker { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.agent-setup-copy h2 { margin: 10px 0 8px; color: #1f343b; font-size: 24px; letter-spacing: 0; }
.agent-setup-copy p { max-width: 620px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.agent-setup-copy code { padding: 1px 5px; color: #166f76; background: #edf8f8; border: 1px solid #d5eeee; border-radius: 5px; font-size: 11px; }
.agent-setup-panel { display: grid; grid-template-columns: 1fr; gap: 8px; align-content: center; }
.agent-metric { min-height: 56px; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 9px 10px; background: #f7fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.agent-metric svg { grid-row: 1 / span 2; width: 16px; height: 16px; color: #1e8d94; justify-self: center; }
.agent-metric span { color: var(--muted); font-size: 9px; font-weight: 800; }
.agent-metric strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.agent-workbench { position: relative; min-height: 0; height: 100%; flex: 1; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.agent-workbench.pending { background: #fbfdfd; }
.agent-frame-hint { position: absolute; top: 10px; left: 50%; z-index: 2; height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: #557176; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 22px rgba(31,52,59,.08); font-size: 10px; font-weight: 800; transform: translateX(-50%); pointer-events: none; }
.agent-frame-hint svg { width: 13px; height: 13px; color: #1e9eaa; }
.agent-frame-hint [data-lucide="loader-circle"] { animation: agent-spin .9s linear infinite; }
.agent-workbench-shell { display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%); }
.agent-workbench-state { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.agent-workbench-state-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 14px; color: #12818a; background: #e2f4f4; border: 1px solid #cce8e8; border-radius: 8px; }
.agent-workbench-state-icon svg { width: 20px; height: 20px; }
.agent-workbench-state-icon [data-lucide="loader-circle"] { animation: agent-spin .9s linear infinite; }
.agent-skeleton-lines { display: grid; gap: 8px; width: min(420px, 86%); margin-top: 18px; }
.agent-skeleton-lines span { display: block; height: 9px; border-radius: 999px; background: linear-gradient(90deg, #e6eeee 25%, #f6fafa 50%, #e6eeee 75%); background-size: 240% 100%; animation: agent-skeleton-shimmer 1.25s ease-in-out infinite; }
.agent-skeleton-lines span:nth-child(2) { width: 82%; }
.agent-skeleton-lines span:nth-child(3) { width: 64%; }
.agent-workbench-state h3 { margin: 8px 0 6px; color: #1f343b; font-size: 18px; letter-spacing: 0; }
.agent-workbench-state p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.agent-workbench-state-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
@keyframes agent-spin { to { transform: rotate(360deg); } }
@keyframes agent-skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.agent-web-frame { display: block; width: 100%; height: 100%; border: 0; background: #ffffff; }
.agent-workbench-with-frame { display: flex; flex-direction: column; }
.agent-workbench-with-frame .agent-web-frame { min-height: 0; flex: 1 1 auto; height: auto; }
.agent-frame-mount { min-width: 0; min-height: 0; flex: 1 1 auto; overflow: hidden; background: #ffffff; }
.agent-workbench-external { display: grid; place-items: center; padding: 24px; background: #f7fbfb; }
.agent-external-state { width: min(430px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.agent-external-state h3 { margin: 8px 0 6px; color: #1f343b; font-size: 18px; letter-spacing: 0; }
.agent-external-state p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.agent-persistent-frame-host { position: fixed; z-index: 31; display: flex; flex-direction: column; overflow: visible; background: #ffffff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 52px rgba(22,42,48,.22); }
.agent-persistent-frame-host[hidden] { display: none; }
.agent-persistent-frame-host.is-parked { visibility: hidden; pointer-events: none; }
.agent-persistent-interaction-shield { position: fixed; z-index: 90; inset: 0; background: transparent; pointer-events: none; }
.agent-persistent-frame-host.is-docked { border: 0; border-radius: 0; box-shadow: none; }
.agent-persistent-frame-head { min-height: 42px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #ffffff; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; touch-action: none; }
.agent-persistent-frame-head.is-dragging { cursor: grabbing; }
.agent-persistent-frame-title { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.agent-persistent-frame-title > svg { width: 14px; height: 14px; flex: 0 0 auto; color: #208d94; }
.agent-persistent-frame-title strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.agent-persistent-frame-head .icon-button, .agent-persistent-frame-head .drawer-collapse-button { width: 27px; height: 27px; flex: 0 0 auto; cursor: pointer; }
.agent-persistent-frame-host .agent-web-frame { display: block; width: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; height: auto; border: 0; background: #ffffff; }
.agent-persistent-frame-host.is-docked .agent-persistent-frame-head { display: none; }
.agent-persistent-frame-resize { position: absolute; z-index: 3; top: -14px; right: -14px; width: 27px; height: 27px; display: grid; place-items: center; cursor: nesw-resize; touch-action: none; background: rgba(255,255,255,.96); border: 1px solid #c8d8da; border-radius: 50%; box-shadow: 0 3px 10px rgba(31,52,59,.14); opacity: .9; }
.agent-persistent-frame-resize > svg { width: 15px; height: 15px; color: #6e898e; transform: rotate(90deg); }
.agent-persistent-frame-resize:hover { color: #176f76; background: #eaf6f5; border-color: #76bdc1; opacity: 1; }
.agent-persistent-frame-resize:hover > svg { color: #176f76; }
.agent-persistent-frame-host.is-docked .agent-persistent-frame-resize { display: none; }
.agent-side-panel { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.agent-side-collapse-button { position: absolute; top: 9px; right: 9px; z-index: 4; width: 28px; height: 28px; color: #4f747a; background: #ffffff; border-color: #d7e3e3; box-shadow: 0 3px 10px rgba(31,52,59,.07); }
.agent-side-collapse-button:hover { color: #176f76; background: #eef8f8; border-color: #a9cdce; }
.agent-side-switcher { min-width: 0; min-height: 48px; flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 45px 7px 9px; background: #ffffff; border-bottom: 1px solid var(--soft-line); }
.agent-side-switcher-label { color: #5f747a; font-size: 10px; font-weight: 900; white-space: nowrap; }
.agent-side-switcher select { width: 100%; min-width: 0; height: 32px; padding: 0 28px 0 9px; overflow: hidden; color: #20363d; background-color: #f7f9f9; border: 1px solid #d9e2e2; border-radius: 6px; outline: none; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.agent-side-switcher select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.12); }
.agent-side-switcher .outline-button { height: 32px; padding: 0 9px; font-size: 9px; white-space: nowrap; }
.agent-side-switcher .outline-button svg { width: 13px; height: 13px; }
.agent-side-runtime { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px; border-bottom: 1px solid var(--soft-line); background: #fbfdfd; }
.agent-side-runtime .agent-runtime-state { min-height: 32px; }
.agent-side-runtime .agent-runtime-state > div { min-width: 0; flex: 1 1 auto; }
/* 第 2 列原本是「恢复当前方案默认值」的 28px 图标位 —— 该按钮已移除（2026-09-22 用户要求），
   改成单列，两个方案分段按钮（.agent-model-profile-segments 是 repeat(2, minmax(0,1fr))）
   随列宽均分、占满整列，与下方「重启 / 停止」那排按钮的观感一致。 */
.agent-model-profile { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 30px auto; align-items: center; gap: 4px 6px; padding-top: 8px; border-top: 1px solid var(--soft-line); }
.agent-model-profile-segments { min-width: 0; height: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2px; border: 1px solid #cfdcdc; border-radius: 6px; background: #f2f6f6; }
.agent-model-profile-segments button { min-width: 0; overflow: hidden; border: 0; border-radius: 4px; color: #657a7f; background: transparent; font-size: 9px; font-weight: 900; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.agent-model-profile-segments button:hover:not(:disabled) { color: #275f64; background: #e7efef; }
.agent-model-profile-segments button.active { color: #ffffff; background: #347b80; box-shadow: 0 1px 2px rgba(29,73,77,.16); }
.agent-model-profile-segments button:disabled { cursor: wait; opacity: .66; }
.agent-model-profile > small { grid-column: 1 / -1; min-width: 0; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.agent-local-context { display: grid; gap: 5px; padding: 8px 0 2px; border-top: 1px solid var(--soft-line); }
.agent-local-context-head, .agent-local-context-stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.agent-local-context-head span { display: inline-flex; align-items: center; gap: 4px; color: #275f64; font-size: 9px; font-weight: 800; }
.agent-local-context-head svg { width: 12px; height: 12px; }
.agent-local-context-head small, .agent-local-context-note { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.agent-local-context select { width: 100%; min-width: 0; height: 27px; padding: 0 7px; border: 1px solid #cfdcdc; border-radius: 5px; color: #35565b; background: #f7fbfb; font: inherit; font-size: 9px; }
.agent-local-context-stats span { color: var(--muted); font-size: 8px; }
.agent-local-context-stats strong { color: #0f8a73; font-size: 10px; }
.agent-local-context-stats strong.warn { color: #b2761c; }
.agent-local-context-stats strong.high { color: #bb4d46; }
/* 生图工作流选择器（2026-09-23）：选定后持续生效直到用户清除；未配置分组时给出提示。 */
.agent-image-workflow { display: grid; gap: 5px; padding: 8px 0 2px; border-top: 1px solid var(--soft-line); }
.agent-image-workflow-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.agent-image-workflow-head span { display: inline-flex; align-items: center; gap: 4px; color: #275f64; font-size: 9px; font-weight: 800; }
.agent-image-workflow-head svg { width: 12px; height: 12px; }
.agent-image-workflow-head small { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.agent-image-workflow select { width: 100%; min-width: 0; height: 27px; padding: 0 7px; border: 1px solid #cfdcdc; border-radius: 5px; color: #35565b; background: #f7fbfb; font: inherit; font-size: 9px; }
.agent-external-window-button { flex: 0 0 auto; }
.agent-external-window-button svg { width: 13px; height: 13px; }
.agent-side-runtime .agent-runtime-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; justify-content: stretch; }
.agent-side-runtime .outline-button, .agent-side-runtime .run-button { width: 100%; min-width: 0; height: 30px; padding: 0 8px; justify-content: center; font-size: 9px; }
.agent-side-runtime .outline-button svg, .agent-side-runtime .run-button svg { width: 13px; height: 13px; }
.agent-tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 6px; border-bottom: 1px solid var(--soft-line); }
.agent-tabs button { min-width: 0; height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 5px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 9px; font-weight: 800; }
.agent-tabs button:hover, .agent-tabs button.active { color: #123d43; background: #e8f5f5; }
.agent-tabs svg { width: 13px; height: 13px; flex: 0 0 auto; }
.agent-side-body { min-height: 0; flex: 1; overflow: auto; padding: 8px; }
.agent-side-body-resource { display: flex; flex-direction: column; overflow: hidden; }
.agent-resource-view { min-height: 0; flex: 1 1 auto; height: 100%; display: flex; flex-direction: column; }
.agent-resource-header { flex: 0 0 auto; }

@media (min-width: 861px) {
  .agent-side-panel.is-collapsed { min-width: 42px; background: #f7fbfb; }
  .agent-side-panel.is-collapsed > :not(.agent-side-collapse-button) { display: none; }
  .agent-side-panel.is-collapsed .agent-side-collapse-button { top: 9px; right: 6px; }
}
.agent-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-bottom: 9px; }
.agent-inline-form input, .agent-inline-form select { min-width: 0; height: 34px; padding: 0 10px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 10px; }
.agent-inline-form input:focus, .agent-inline-form select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.12); }
.agent-resource-import-form { grid-template-columns: minmax(0, 1fr) 82px auto; }
.agent-side-list { display: flex; flex-direction: column; gap: 6px; }
.agent-resource-list { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.agent-mini-row { min-width: 0; min-height: 44px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 6px 7px; background: #f7fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.agent-mini-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #1e858c; background: #e2f4f4; border-radius: 6px; }
.agent-mini-icon svg { width: 14px; height: 14px; }
.agent-mini-row div { min-width: 0; }
.agent-mini-row strong, .agent-mini-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-mini-row strong { color: var(--ink); font-size: 11px; }
.agent-mini-row small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.agent-mini-row em { color: #678087; font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }
.agent-mini-row.is-actionable { cursor: pointer; }
.agent-mini-row.is-actionable:hover { border-color: #a9cdce; background: #eef8f8; }
.agent-role-row { width: 100%; display: block; color: inherit; font: inherit; text-align: left; }
.agent-role-row.is-active { background: #eef8f5; border-color: #8fc7b4; box-shadow: inset 3px 0 0 #2f8f6b; }
.agent-role-row.is-disabled { opacity: .62; }
.agent-role-row-main { min-width: 0; display: grid; grid-template-rows: 28px 14px 18px; row-gap: 3px; }
.agent-role-row-title { min-width: 0; display: flex; align-items: center; gap: 7px; }
.agent-role-row-title .agent-mini-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.agent-role-row-title .agent-mini-icon svg { width: 13px; height: 13px; }
.agent-role-row-title > strong { min-width: 0; flex: 1 1 auto; }
.agent-work-status { max-width: 108px; min-height: 21px; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; overflow: hidden; color: #677b80; background: #ffffff; border: 1px solid #d5e0e0; border-radius: 5px; font: inherit; font-size: 8px; font-weight: 900; white-space: nowrap; }
button.agent-work-status { cursor: pointer; }
button.agent-work-status:hover { filter: brightness(.97); }
.agent-work-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-work-status svg { width: 10px; height: 10px; flex: 0 0 auto; }
.agent-work-status.main { color: #286a70; background: #eaf6f6; border-color: #c9e3e3; }
.agent-work-status.working { color: #875d18; background: #fff6e5; border-color: #ecd5aa; }
.agent-work-status.working svg { animation: agent-spin .9s linear infinite; }
.agent-work-status.queued { color: #5b6f75; background: #f4f7f7; }
.agent-work-status.success { color: #24684e; background: #e6f4ed; border-color: #c4e1d3; }
.agent-work-status.error { color: #963a45; background: #fff0f1; border-color: #edc8cc; }
.agent-role-row-main > small { height: 14px; margin-top: 0; line-height: 14px; }
.agent-role-row-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.agent-role-row-actions .agent-row-action { width: 27px; padding: 0; display: grid; place-items: center; }
.agent-role-row-actions .agent-row-action svg { width: 12px; height: 12px; }
.agent-role-row-actions .agent-enter-action { width: auto; min-width: 48px; padding: 0 7px; display: inline-flex; gap: 4px; }
.agent-role-row-actions .agent-enter-action span { font-size: 9px; }
.agent-personal-create-button { width: 100%; min-height: 36px; justify-content: flex-start; padding: 0 10px; color: #276b71; background: #f7fbfb; border-color: #cfe2e2; }
.agent-personal-create-button:hover { color: #124d53; border-color: #9ecaca; background: #eef8f8; }
.agent-personal-row-actions .agent-row-action { width: 27px; min-width: 27px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.agent-personal-row-actions .agent-enter-action { width: auto; min-width: 48px; padding: 0 7px; }
.agent-personal-row-actions .agent-enter-action span { font-size: 9px; }
.agent-personal-row-actions .agent-row-action:not(.agent-enter-action) span { display: none; }
.agent-personal-row-actions .agent-row-action.danger { color: #8c5050; border-color: #ead2d2; }
.agent-personal-row-actions .agent-row-action.danger:hover { color: #a33f3f; border-color: #e5b4b4; background: #fff7f7; }
.agent-personal-row-actions .agent-row-action:disabled { opacity: .5; cursor: not-allowed; }
.agent-active-badge { min-height: 20px; display: inline-flex; align-items: center; padding: 0 6px; color: #236a50 !important; background: #dcf1e7; border: 1px solid #b9dfcf; border-radius: 5px; }
.agent-role-row-action { display: inline-flex; align-items: center; gap: 5px; }
.agent-role-row-action svg { width: 12px; height: 12px; color: #4f8589; }
.agent-role-profile-summary { min-width: 0; height: 18px; display: flex; flex-wrap: nowrap; align-items: center; gap: 3px; margin-top: 0; overflow: hidden; }
.agent-role-profile-summary span { max-width: 132px; min-height: 18px; display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; color: #44686f; background: #ffffff; border: 1px solid #d8e6e6; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 850; }
.agent-role-profile-summary span:first-child { min-width: 0; flex: 1 1 auto; }
.agent-role-profile-summary span:not(:first-child) { flex: 0 0 auto; }
.agent-role-profile-summary svg { width: 10px; height: 10px; flex: 0 0 auto; color: #1e858c; }
.agent-role-profile-summary .agent-inline-thinking { max-width: 190px; padding-right: 2px; }
.agent-inline-thinking strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
.agent-inline-thinking select { min-width: 38px; max-width: 48px; height: 15px; padding: 0 1px; color: #236a70; background: #eef8f8; border: 0; border-radius: 3px; outline: none; font: inherit; font-size: 8px; font-weight: 850; }
.agent-inline-thinking select:focus { box-shadow: 0 0 0 2px rgba(30,158,170,.2); }
.agent-personal-role-editor .agent-role-editor-body { gap: 14px; }
.agent-personal-capabilities { min-width: 0; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--soft-line); }
.agent-personal-capabilities legend { padding: 0 8px 0 0; color: #315a61; font-size: 11px; font-weight: 900; }
.agent-personal-capability-grid { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.agent-personal-capability-grid .agent-role-toggle { min-height: 58px; }
.agent-personal-resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.agent-personal-resource-grid .agent-role-resource-picker > summary { min-height: 40px; }
.agent-role-editor-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(27,45,51,.36); backdrop-filter: blur(2px); }
.agent-role-editor { width: min(760px, calc(100vw - 36px)); max-height: min(820px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 30px 90px rgba(20,35,40,.28); }
.agent-role-editor > header { min-height: 60px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--soft-line); }
.agent-role-editor > header > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.agent-role-editor > header > div > div { min-width: 0; }
.agent-role-editor > header strong, .agent-role-editor > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-role-editor > header strong { font-size: 14px; }
.agent-role-editor > header small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.agent-role-editor-body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; overflow: auto; padding: 16px 18px; }
.agent-role-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: #51676d; font-size: 10px; font-weight: 850; }
.agent-role-field > input, .agent-role-field > textarea, .agent-role-field > select { width: 100%; min-width: 0; padding: 0 10px; color: var(--ink); background-color: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: 11px; font-weight: 600; }
.agent-role-field > input, .agent-role-field > select { height: 36px; }
.agent-role-field > textarea { min-height: 72px; padding-top: 9px; padding-bottom: 9px; resize: vertical; line-height: 1.55; }
.agent-role-field > input:focus, .agent-role-field > textarea:focus, .agent-role-field > select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.11); }
.agent-role-field > small { color: var(--muted); font-size: 9px; font-weight: 700; }
.agent-role-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.agent-image-generation-settings { min-width: 0; display: flex; flex-direction: column; gap: 10px; margin: 2px 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--soft-line); }
.agent-image-generation-settings legend { padding: 0 8px 0 0; color: #315a61; font-size: 11px; font-weight: 900; }
.agent-image-generation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.agent-image-generation-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agent-vision-analysis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.agent-role-resource-picker { min-width: 0; margin: 0; }
.agent-role-resource-picker > summary { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; color: #51676d; background: #f7fbfb; border: 1px solid var(--soft-line); border-radius: 6px; cursor: pointer; list-style-position: inside; }
.agent-role-resource-picker > summary:hover { border-color: #a9cdce; background: #eef8f8; }
.agent-role-resource-picker > summary::-webkit-details-marker { color: var(--cyan); }
.agent-role-resource-picker[open] > summary { border-radius: 6px 6px 0 0; border-bottom-color: #c8dddd; }
.agent-role-resource-picker-title { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.agent-role-resource-picker-count { flex: 0 0 auto; color: var(--muted); font-size: 9px; font-weight: 750; }
.agent-role-resource-options { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.agent-role-resource-option { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 42px; padding: 6px 8px; background: #f7fbfb; border: 1px solid var(--soft-line); border-radius: 6px; cursor: pointer; }
.agent-role-resource-option:hover { border-color: #a9cdce; background: #eef8f8; }
.agent-role-resource-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--cyan); }
.agent-role-resource-option strong, .agent-role-resource-option small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-role-resource-option strong { color: var(--ink); font-size: 10px; }
.agent-role-resource-option small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.agent-role-resource-empty { min-height: 42px; display: flex; align-items: center; padding: 7px 8px; color: var(--muted); background: #f7fbfb; border: 1px dashed #cfdcdd; border-radius: 6px; font-size: 9px; line-height: 1.45; }
.agent-role-toggle { min-height: 54px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 10px; background: #f7fbfb; border: 1px solid var(--soft-line); border-radius: 7px; cursor: pointer; }
.agent-role-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--cyan); }
.agent-role-toggle strong, .agent-role-toggle small { display: block; }
.agent-role-toggle strong { font-size: 11px; }
.agent-role-toggle small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.agent-role-editor > footer { min-height: 58px; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--soft-line); }
.agent-resource-hint { padding: 7px 8px; color: #607982; background: #f5fafa; border: 1px solid #dce8e8; border-radius: 7px; font-size: 9px; line-height: 1.45; }
/* 2026-09-23：Agent 编辑页的“已载入 Skill”只读清单。字号与同级小字统一（9px），
   之前这里没有样式定义，用了浏览器默认字号（约 13-16px），显得比周围突兀。 */
.agent-skill-readonly { padding: 7px 8px; color: #607982; background: #f5fafa; border: 1px solid #dce8e8; border-radius: 7px; font-size: 9px; line-height: 1.45; }
/* 折叠：summary 就是标题行；去掉浏览器默认三角，改用右侧 ▾ 并在展开时翻转 */
.agent-skill-readonly > summary { cursor: pointer; list-style: none; user-select: none; }
.agent-skill-readonly > summary::-webkit-details-marker { display: none; }
.agent-skill-readonly > summary::after { content: "▾"; flex: 0 0 auto; margin-left: 6px; color: var(--muted); font-size: 8px; transition: transform .15s ease; }
.agent-skill-readonly[open] > summary::after { transform: rotate(180deg); }
.agent-skill-readonly[open] > summary { margin-bottom: 6px; }
.agent-skill-readonly-head { display: flex; align-items: center; gap: 6px; color: #315d62; font-size: 9px; }
.agent-skill-readonly-head svg { width: 12px; height: 12px; flex: 0 0 auto; }
.agent-skill-readonly-head strong { font-size: 9px; font-weight: 850; }
.agent-skill-readonly-head em { margin-left: auto; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 400; }
.agent-skill-readonly-list { margin: 6px 0 0; padding: 0; display: grid; gap: 4px; list-style: none; }
.agent-skill-readonly-list li { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; padding: 2px 6px; background: #ffffff; border: 1px solid #eef4f4; border-radius: 5px; color: var(--ink); font-size: 9px; }
.agent-skill-readonly-list li.is-missing { color: #a9680f; background: #fff9f7; border-color: #efd2cc; }
.agent-skill-readonly-list li em { color: #a9680f; font-size: 8.5px; font-style: normal; }
.agent-skill-readonly-empty { margin-top: 6px; color: var(--muted); font-size: 9px; }
.agent-loaded-capabilities { display: grid; gap: 6px; margin: 6px 0; padding: 7px; background: #f8fbfb; border: 1px solid #dce8e8; border-radius: 7px; }
.agent-loaded-capabilities-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #315d62; font-size: 9px; }
.agent-loaded-capabilities-head span { color: var(--muted); font-weight: 700; }
.agent-loaded-capabilities-list { display: grid; gap: 5px; }
.agent-loaded-capability-row { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 36px; padding: 4px 5px; background: #ffffff; border: 1px solid #dce8e8; border-radius: 5px; }
.agent-loaded-capability-row.is-missing { background: #fff9f7; border-color: #efd2cc; }
.agent-loaded-capability-row .agent-mini-icon { width: 25px; height: 25px; }
.agent-loaded-capability-row strong, .agent-loaded-capability-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-loaded-capability-row strong { color: var(--ink); font-size: 9px; }
.agent-loaded-capability-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
/* ===== 2026-09-23 Skill 页方案 C：左分类树 / 中紧凑列表 / 右详情编辑（正文统一 12px） ===== */
/* 一屏布局：页面 .capability-page 已绝对定位满铺宿主，这里让"安装区 + 三栏"吃满剩余高度；
   只有中栏 .cap-list 纵向滚动，左树与右栏外壳固定（不依赖 :has()）。 */
.cap-workspace-band { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 10px 14px 12px; }
.cap-workspace { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 276px minmax(0, 1fr) 900px; margin-top: 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 8px; overflow: hidden; }
/* —— 左栏：分类树（一级可折叠；二级缩进 2 个汉字 = 24px）—— 不滚动 */
.cap-tree { min-width: 0; overflow: hidden; padding: 8px 8px 12px; background: #fbfdfd; border-right: 1px solid var(--soft-line); }
.cap-tree-node { display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; padding: 0 8px; color: var(--ink); background: transparent; border: 0; border-radius: 5px; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.cap-tree-node:hover { background: #eff7f7; }
.cap-tree-node.is-on { color: #166b72; background: #e3f3f3; font-weight: 850; }
.cap-tree-node svg { width: 15px; height: 15px; flex: 0 0 15px; color: #2e878e; }
.cap-tree-node > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-tree-node > em { margin-left: auto; color: var(--muted); font-size: 11px; font-style: normal; }
.cap-tree-node.is-child { padding-left: 39px; color: #416d72; }
.cap-tree-branch { min-width: 0; }
.cap-tree-row { display: flex; align-items: center; gap: 2px; }
.cap-tree-row.is-on .cap-tree-node.is-branch { color: #166b72; background: #e9f5f5; font-weight: 850; }
.cap-tree-toggle { width: 20px; height: 30px; display: grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.cap-tree-toggle svg { width: 14px; height: 14px; }
.cap-tree-row .cap-tree-node.is-branch { flex: 1 1 auto; width: auto; }
/* 「全部」等直接放在 cap-tree-row 里的节点：也要伸缩，否则 width:100% 会把计数挤出去 */
.cap-tree-row > .cap-tree-node { flex: 1 1 auto; width: auto; min-width: 0; }
.cap-tree-ops { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; opacity: 0; transition: opacity .12s ease; }
.cap-tree-row:hover .cap-tree-ops, .cap-tree-row:focus-within .cap-tree-ops { opacity: 1; }
/* 2026-09-23：二级行按钮在半透明常显基础上，hover 时再提亮，保证“看得见、点得到”。 */
.cap-tree-children { display: grid; gap: 1px; padding: 1px 0 3px; }
/* —— 中栏：一级分组 → 二级分组 → 资源行，逐级缩进 24px —— */
.cap-list { min-width: 0; overflow: auto; background: #ffffff; border-right: 1px solid var(--soft-line); }
.cap-list-group { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; color: #2f5c61; background: #eef6f6; border-bottom: 1px solid var(--soft-line); font-size: 12px; font-weight: 850; }
.cap-list-group em { padding: 1px 6px; color: #6a8589; background: #ffffff; border-radius: 8px; font-size: 11px; font-style: normal; }
.cap-list-head { position: sticky; top: 30px; z-index: 2; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 34px; color: #416d72; background: #f7fbfb; border-bottom: 1px solid var(--soft-line); font-size: 12px; font-weight: 800; }
.cap-list-head em { padding: 1px 6px; color: #6a8589; background: #edf5f5; border-radius: 8px; font-size: 11px; font-style: normal; }
.cap-skill-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px 0 58px; border-bottom: 1px solid #eef4f4; cursor: pointer; }
.cap-skill-row:hover { background: #f2f9f9; }
/* 选中态要一眼可辨：底色明显加深 + 左侧 4px 主题色条 + 名称加重 */
.cap-skill-row.is-selected { background: #d5ecef; box-shadow: inset 4px 0 0 var(--cyan); border-bottom-color: #b3dfe4; }
.cap-skill-row.is-selected:hover { background: #cbe7eb; }
.cap-skill-row.is-selected .cap-skill-row-name { color: #08414b; font-weight: 850; }
.cap-skill-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.cap-skill-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9e6a; }
.cap-skill-dot.is-pending { background: #d9a03a; }
.cap-skill-dot.is-blocked { background: #b9c6c8; }
.cap-skill-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.cap-skill-row .capability-resource-status { min-width: 52px; min-height: 22px; padding: 0 6px; font-size: 11px; }
/* 接入状态：未接入=橙字（需处理，可点），已接入=淡色极简数字（不抢视线） */
.cap-skill-binding { min-width: 0; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cap-skill-binding.is-bound { color: #5b7c80; background: #eef6f6; }
.cap-skill-binding.is-none { color: #a9680f; background: #fdf3e3; cursor: pointer; }
.cap-skill-binding.is-none:hover { background: #f8e6c8; }
/* 右栏「接入 Agent」 */
.cap-binding-section { margin-bottom: 12px; }
.cap-binding-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.cap-binding-head strong { color: var(--ink); font-size: 12px; font-weight: 850; }
.cap-binding-head small { color: var(--muted); font-size: 11px; }
.cap-binding-rows { display: flex; flex-direction: column; gap: 4px; }
.cap-binding-row { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 8px; border: 1px solid #eef4f4; border-radius: 5px; font-size: 12px; cursor: pointer; }
.cap-binding-row:hover { background: #f7fbfb; }
.cap-binding-row.is-locked { opacity: .72; cursor: default; }
.cap-binding-row input[type="checkbox"] { flex: 0 0 auto; }
.cap-binding-row .cap-binding-name { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.cap-bindings-dirty { color: #a9680f; font-size: 11px; font-style: normal; font-weight: 700; }
.cap-binding-source { color: #6a8589; font-size: 11px; font-style: normal; }
.cap-binding-lock { color: #a9680f; font-size: 11px; font-style: normal; }
.cap-bindings-summary { margin-bottom: 10px; color: var(--ink); font-size: 12px; font-weight: 800; }
.cap-bindings-hint, .cap-bindings-note { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.cap-bindings-note { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--soft-line); }
/* 2026-10-04：MCP 详情的「配置与简介」tab（不读 SKILL.md，直接展示这条 MCP 自己的登记信息） */
.cap-mcp-intro { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; overflow: auto; }
.cap-mcp-intro-desc { margin: 0; color: var(--ink); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; }
.cap-mcp-intro-desc.is-empty { color: var(--muted); }
.cap-mcp-intro-rows { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cap-mcp-intro-rows > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 8px; }
.cap-mcp-intro-rows dt { color: var(--muted); font-size: 11.5px; }
.cap-mcp-intro-rows dd { margin: 0; color: var(--ink); font-size: 12px; word-break: break-all; }
/* —— 右栏：详情与编辑 —— */
/* 右栏外壳不滚；内容超长时由各区域自己处理（预览正文区内部可滚） */
.cap-detail { min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 12px 14px; background: #ffffff; }
.cap-detail-form { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cap-detail-empty { padding: 24px 12px; color: var(--muted); font-size: 12px; text-align: center; }
.cap-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.cap-detail-head h3 { min-width: 0; flex: 1 1 auto; margin: 0; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cap-detail-field { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.cap-detail-field > span { color: var(--muted); }
.cap-detail-field input, .cap-detail-field select { min-width: 0; width: 100%; height: 30px; padding: 0 8px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; font-size: 12px; }
.cap-detail-field input:focus, .cap-detail-field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.1); }
.cap-detail .capability-skill-name { width: 100%; flex: 1 1 auto; height: 30px; padding: 0 8px; background: #ffffff; border: 1px solid var(--line); font-size: 12px; font-weight: 850; }
.cap-detail-path, .cap-detail-id { display: grid; gap: 4px; margin-bottom: 9px; color: var(--muted); font-size: 12px; }
.cap-detail-path-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.cap-detail-path code, .cap-detail-id code { min-width: 0; padding: 7px 8px; color: #5c7478; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; word-break: break-all; }
.cap-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cap-detail-actions .outline-button.is-danger { color: #9a3e3e; border-color: #f0c7c3; }
.cap-detail-actions .outline-button.is-danger:hover { background: #fff0ef; }
/* —— 右栏 Tab（基本信息 / 内容预览）—— */
.cap-detail-tabs { display: flex; gap: 2px; margin: -2px 0 10px; padding: 2px; background: #f2f8f8; border: 1px solid var(--soft-line); border-radius: 7px; }
.cap-detail-tab { flex: 1 1 0; height: 26px; padding: 0 8px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.cap-detail-tab:hover { color: #166b72; }
.cap-detail-tab.is-on { color: #10656c; background: #ffffff; box-shadow: 0 1px 2px rgba(18, 60, 64, .08); }
/* —— 内容预览（只读：SKILL.md 渲染结果）—— */
.cap-preview { min-width: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cap-preview-meta { flex: 0 0 auto; margin-bottom: 8px; padding: 5px 8px; color: var(--muted); background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.cap-preview-body { min-width: 0; flex: 1 1 auto; min-height: 0; overflow: auto; color: var(--ink); font-size: 12px; line-height: 1.65; word-break: break-word; }
.cap-preview-body h1, .cap-preview-body h2, .cap-preview-body h3, .cap-preview-body h4 { margin: 12px 0 6px; line-height: 1.35; }
.cap-preview-body h1 { font-size: 15px; }
.cap-preview-body h2 { font-size: 13.5px; }
.cap-preview-body h3, .cap-preview-body h4 { font-size: 12.5px; }
.cap-preview-body p { margin: 6px 0; }
.cap-preview-body ul, .cap-preview-body ol { margin: 6px 0; padding-left: 20px; }
.cap-preview-body li { margin: 2px 0; }
.cap-preview-body code { padding: 1px 4px; background: #f2f7f7; border: 1px solid var(--soft-line); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.cap-preview-body pre { margin: 8px 0; padding: 8px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 6px; overflow: auto; }
.cap-preview-body pre code { padding: 0; background: transparent; border: 0; }
.cap-preview-body table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 11px; }
.cap-preview-body th, .cap-preview-body td { padding: 4px 6px; border: 1px solid var(--soft-line); text-align: left; }
.cap-preview-body a { color: #16707a; }
.cap-preview-body hr { margin: 12px 0; border: 0; border-top: 1px solid var(--soft-line); }
.cap-preview-hint { padding: 16px 12px; color: var(--muted); background: #f8fbfb; border: 1px dashed var(--line); border-radius: 7px; font-size: 12px; text-align: center; line-height: 1.6; }
.cap-preview-hint.is-error { color: #9a3e3e; background: #fff0ef; border-color: #f0c7c3; }
.cap-preview-actions { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.cap-preview-empty { color: var(--muted); }
@media (max-width: 1780px) {
  .cap-workspace { grid-template-columns: 258px minmax(0, 1fr) 760px; }
}
@media (max-width: 1500px) {
  .cap-workspace { grid-template-columns: 235px minmax(0, 1fr) 620px; }
}
@media (max-width: 1240px) {
  .cap-workspace { grid-template-columns: 212px minmax(0, 1fr) 480px; }
}
@media (max-width: 1000px) {
  .cap-workspace { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cap-tree { display: none; }
  .cap-skill-row { padding-left: 10px; }
}
/* 2026-09-23：一屏布局（不依赖 :has()）——页面用绝对定位铺满宿主 .page-view 的 padding box，
   自身 flex 列 + overflow:hidden，保证整页高度不超过视口；滚动交给内部区域。 */
.capability-page { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 14px 18px 16px; }
.capability-install-band, .capability-resource-band { min-width: 0; padding: 14px; background: #ffffff; border: 1px solid var(--line); border-radius: 8px; }
.capability-section-head { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.capability-section-actions { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.capability-section-head h2 { margin: 0; color: var(--ink); font-size: 15px; letter-spacing: 0; }
.capability-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.capability-install-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.capability-install-form input, .capability-search { min-width: 0; height: 34px; padding: 0 10px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: 11px; }
.capability-install-form input:focus, .capability-search:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.1); }
.capability-install-form .run-button { min-width: 126px; justify-content: center; }
.capability-error { margin-top: 9px; padding: 8px 10px; color: #9a3e3e; background: #fff0ef; border: 1px solid #f0c7c3; border-radius: 6px; font-size: 10px; line-height: 1.5; }
.capability-resource-band .capability-section-head { align-items: center; }
.capability-search { width: min(280px, 42%); }
.capability-resource-tools { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.capability-category-filter { width: 150px; height: 34px; padding: 0 8px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: 10px; }
.capability-category-filter:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.1); }
.capability-resource-list { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px; margin-top: 12px; overflow: auto; align-content: start; }
.capability-resource-list.is-skill-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.capability-resource-list.is-skill-groups { display: grid; gap: 10px; }
.capability-skill-group { min-width: 0; overflow: hidden; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.capability-skill-group-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; background: #f5fafa; border-bottom: 1px solid transparent; }
.capability-skill-group.is-expanded .capability-skill-group-head { border-bottom-color: var(--soft-line); }
.capability-skill-group-toggle { min-width: 0; display: inline-flex; align-items: center; gap: 7px; padding: 0; color: var(--ink); background: transparent; border: 0; cursor: pointer; font: inherit; text-align: left; }
.capability-skill-group-toggle svg { width: 15px; height: 15px; color: var(--cyan); flex: 0 0 auto; }
.capability-skill-group-toggle strong { font-size: 12px; font-weight: 850; }
.capability-skill-group-toggle span { min-width: 22px; padding: 2px 6px; color: #2e7379; background: #e3f3f3; border-radius: 10px; font-size: 9px; font-weight: 850; text-align: center; }
.capability-skill-group-toggle.is-static { cursor: default; }
.capability-skill-group-actions, .capability-subgroup-actions { display: inline-flex; align-items: center; gap: 2px; }
.capability-skill-group-body { display: grid; gap: 10px; padding: 10px; }
.capability-subgroup { min-width: 0; display: grid; gap: 6px; }
.capability-subgroup-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.capability-subgroup-head h3 { min-width: 0; margin: 0; color: #416d72; font-size: 10px; font-weight: 850; }
.capability-subgroup-head h3 small { display: inline-flex; min-width: 18px; justify-content: center; margin-left: 4px; padding: 1px 5px; color: #6a8589; background: #edf5f5; border-radius: 8px; font-size: 8px; }
.capability-subgroup-grid { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.capability-resource-row { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 52px; padding: 7px 8px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.capability-resource-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #1e858c; background: #e2f4f4; border-radius: 6px; }
.capability-resource-icon svg { width: 15px; height: 15px; }
.capability-resource-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.capability-resource-main strong, .capability-resource-main small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capability-resource-main strong { font-size: 11px; }
.capability-resource-main small { color: var(--muted); font-size: 9px; }
.capability-resource-main em { color: #5c7478; font-size: 9px; font-style: normal; }
.capability-resource-status { min-width: 54px; display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0 7px; border-radius: 5px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.capability-resource-status.is-enabled { color: #24684e; background: #e6f4ed; border: 1px solid #c4e1d3; }
.capability-resource-status.is-pending { color: #875d18; background: #fff6e5; border: 1px solid #ecd5aa; }
.capability-resource-status.is-blocked { color: #963a45; background: #fff0f1; border: 1px solid #edc8cc; }
.capability-empty { padding: 22px 12px; color: var(--muted); background: #f8fbfb; border: 1px dashed var(--line); border-radius: 7px; font-size: 11px; text-align: center; }
.capability-resource-list.is-skill-grid .capability-empty { grid-column: 1 / -1; }
.capability-skill-card { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 8px; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.capability-skill-card:focus-within { border-color: rgba(30,158,170,.55); box-shadow: 0 0 0 3px rgba(30,158,170,.08); }
.capability-skill-card-head { min-width: 0; display: flex; align-items: center; gap: 5px; }
.capability-skill-card-head .capability-resource-icon { width: 26px; height: 26px; flex: 0 0 26px; }
.capability-skill-card-head .capability-resource-icon svg { width: 14px; height: 14px; }
.capability-skill-name { min-width: 0; width: 60%; flex: 0 1 60%; height: 26px; padding: 0 5px; color: var(--ink); background: #ffffff; border: 1px solid transparent; border-radius: 5px; outline: none; font: inherit; font-size: 10px; font-weight: 850; }
.capability-skill-name:hover, .capability-skill-name:focus { border-color: var(--line); }
.capability-skill-card-head .capability-skill-toggle { width: 25px; height: 25px; flex: 0 0 25px; }
.capability-skill-card-head .capability-resource-status { min-width: 48px; min-height: 21px; flex: 0 1 auto; padding: 0 5px; font-size: 8px; }
.capability-skill-data-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 25px 25px; align-items: center; gap: 4px; }
.capability-skill-data-row code { min-width: 0; overflow: hidden; color: #7a8b90; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.capability-skill-data-row .icon-button { width: 25px; height: 25px; padding: 0; flex: 0 0 25px; }
.capability-skill-editor { min-width: 0; border-top: 1px solid var(--soft-line); padding-top: 6px; }
.capability-skill-editor:not([open]) { display: none; }
.capability-skill-editor > summary { display: none; }
.capability-skill-editor-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 0; }
.capability-skill-editor-field { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 800; }
.capability-skill-editor-field input, .capability-skill-editor-field select { min-width: 0; width: 100%; height: 26px; padding: 0 5px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; font-size: 9px; }
.capability-skill-editor-field input:focus, .capability-skill-editor-field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.1); }
.capability-skill-editor-path { min-width: 0; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 800; }
.capability-skill-editor-path-value { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 25px; align-items: center; gap: 4px; }
.capability-skill-editor-path-value code { min-width: 0; overflow: hidden; color: #63777d; background: #ffffff; border: 1px solid var(--line); border-radius: 5px; padding: 5px; font: 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.capability-skill-editor-path-value .icon-button { width: 25px; height: 25px; padding: 0; }
.capability-text-editor { padding: 11px 14px; background: #ffffff; border: 1px solid var(--line); border-radius: 8px; }
.capability-text-editor summary { display: flex; align-items: center; gap: 7px; color: #315d62; cursor: pointer; font-size: 11px; font-weight: 800; }
.capability-text-editor summary svg { width: 14px; height: 14px; color: var(--cyan); }
.capability-text-editor form { display: grid; gap: 8px; max-width: 720px; padding-top: 12px; }
.capability-text-editor label { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 800; }
.capability-text-editor input, .capability-text-editor select, .capability-text-editor textarea { min-width: 0; width: 100%; padding: 7px 8px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: 10px; }
.capability-text-editor input, .capability-text-editor select { height: 31px; }
.capability-text-editor textarea { resize: vertical; }
.capability-text-editor input:focus, .capability-text-editor select:focus, .capability-text-editor textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.1); }
.capability-text-editor button { justify-self: end; }
@media (max-width: 700px) {
  .capability-page { padding: 10px; }
  .capability-resource-band .capability-section-head { align-items: flex-start; flex-direction: column; }
  .capability-resource-tools { width: 100%; justify-content: stretch; }
  .capability-search { width: 100%; }
  .capability-category-filter { flex: 0 0 132px; }
  .capability-resource-list.is-skill-grid, .capability-subgroup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-skill-name { flex-basis: 55%; width: 55%; }
}
@media (max-width: 520px) {
  .capability-resource-list.is-skill-grid, .capability-subgroup-grid { grid-template-columns: minmax(0, 1fr); }
  .capability-skill-group-head { align-items: flex-start; }
  .capability-skill-group-actions { flex-wrap: wrap; }
  .capability-skill-name { flex-basis: 60%; width: 60%; }
}
.agent-task-form { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.agent-task-form-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; }
.agent-task-form input, .agent-task-form textarea, .agent-task-form select { width: 100%; min-width: 0; padding: 0 9px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 10px; }
.agent-task-form input, .agent-task-form select { height: 33px; }
.agent-task-form textarea { min-height: 72px; padding-top: 8px; padding-bottom: 8px; resize: vertical; line-height: 1.5; }
.agent-task-form input:focus, .agent-task-form textarea:focus, .agent-task-form select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.1); }
.agent-task-form .run-button { width: 100%; height: 32px; justify-content: center; }
.agent-task-form-head .outline-button { width: 32px; height: 33px; padding: 0; }
.agent-task-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.agent-task-row { overflow: hidden; background: #f8fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.agent-task-row > summary { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px; cursor: pointer; list-style: none; }
.agent-task-row > summary::-webkit-details-marker { display: none; }
.agent-task-copy { min-width: 0; }
.agent-task-copy strong, .agent-task-copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-task-copy strong { color: var(--ink); font-size: 10px; }
.agent-task-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.agent-task-status { min-height: 21px; display: inline-flex; align-items: center; padding: 0 6px; border: 1px solid #d4dfdf; border-radius: 5px; color: #63777d; background: #ffffff; font-size: 8px; font-weight: 900; white-space: nowrap; }
.agent-task-status.success { color: #24684e; background: #e6f4ed; border-color: #c4e1d3; }
.agent-task-status.error { color: #9b3842; background: #fff0f1; border-color: #edc8cc; }
.agent-task-status.working { color: #8b611e; background: #fff7e8; border-color: #edd9b4; }
.agent-task-detail { padding: 8px 9px 9px; border-top: 1px solid var(--soft-line); }
.agent-task-detail > small { color: var(--muted); font-size: 8px; }
.agent-task-detail p { margin: 6px 0 0; color: #52686d; font-size: 9px; line-height: 1.55; }
.agent-task-detail p strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 9px; }
.agent-task-detail pre { max-height: 260px; margin: 7px 0 0; overflow: auto; padding: 8px; color: #263b41; background: #ffffff; border: 1px solid #e0e8e8; border-radius: 6px; font: 9px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-task-open-button { height: 28px; margin-top: 7px; padding: 0 8px; font-size: 9px; }
.agent-task-open-button svg { width: 12px; height: 12px; }
.agent-task-row[open] .agent-mini-icon [data-lucide="loader-circle"] { animation: agent-spin .9s linear infinite; }
.agent-resource-row.is-high-risk { background: #fff8f7; border-color: #efd2cc; }
.agent-resource-flags { min-width: 0; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.agent-resource-flags span { max-width: 72px; min-height: 17px; display: inline-flex; align-items: center; padding: 0 5px; border-radius: 5px; font-size: 8px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-resource-flags .is-low { color: #287178; background: #e6f6f5; border: 1px solid #c8e7e4; }
.agent-resource-flags .is-high { color: #9a3426; background: #fff0ec; border: 1px solid #efc7bd; }
.agent-resource-topbar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 29px 29px; gap: 5px; margin: 8px 0 5px; }
.agent-resource-topbar input, .agent-resource-filter select { min-width: 0; width: 100%; height: 29px; padding: 0 7px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 5px; outline: none; font: inherit; font-size: 9px; }
.agent-resource-topbar input:focus, .agent-resource-filter select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.1); }
.agent-resource-toolbar-icon { width: 29px; height: 29px; padding: 0; color: #456267; background: #fbfdfd; border-color: var(--line); }
.agent-resource-toolbar-icon:hover { color: var(--ink); background: #eef8f8; border-color: #a9cdce; }
.agent-resource-toolbar-icon svg { width: 14px; height: 14px; }
.agent-resource-filter { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0 0 8px; }
.agent-resource-filter input:focus, .agent-resource-filter select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(30,158,170,.1); }
.agent-resource-filter .outline-button { min-width: 0; height: 29px; justify-content: center; padding: 0 6px; font-size: 9px; }
.agent-resource-row { cursor: pointer; }
.agent-resource-row.is-meta-target { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(30,158,170,.1); }
.agent-resource-row:focus-visible { outline: 2px solid rgba(30,158,170,.35); outline-offset: 1px; }
.agent-resource-row[hidden], .agent-personal-editor[hidden] { display: none !important; }
.agent-row-action { height: 26px; padding: 0 8px; color: #276b71; background: #ffffff; border: 1px solid #cfe2e2; border-radius: 5px; cursor: pointer; font-size: 9px; font-weight: 800; }
.agent-row-action:hover { color: #124d53; border-color: #9ecaca; }
.agent-empty, .agent-permission-note { padding: 14px 10px; color: var(--muted); background: #f7fbfb; border: 1px dashed #cfdcdd; border-radius: 7px; font-size: 10px; line-height: 1.6; }
.agent-log-list { display: flex; flex-direction: column; gap: 8px; }
.agent-update-panel { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--soft-line); }
.agent-update-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.agent-log { background: #f7fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.agent-log summary { min-height: 36px; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 10px; cursor: pointer; }
.agent-log summary span { color: var(--ink); font-size: 10px; font-weight: 900; }
.agent-log summary small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.agent-log pre { max-height: 260px; margin: 0; overflow: auto; padding: 10px; color: #23353b; background: #ffffff; border-top: 1px solid var(--soft-line); font-size: 10px; line-height: 1.5; white-space: pre-wrap; }
.agent-task-log { background: #f7fbfb; border: 1px solid var(--soft-line); border-radius: 7px; }
.agent-task-log > summary { min-height: 36px; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 10px; cursor: pointer; }
.agent-task-log > summary span { color: var(--ink); font-size: 10px; font-weight: 900; }
.agent-task-log > summary small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.agent-task-log-body { padding: 0 8px 8px; border-top: 1px solid var(--soft-line); }
.agent-task-log-body .agent-task-list { margin-top: 8px; }
.agent-window-page, .knowledge-window-page { background: #eef4f4; }
.agent-window-page #app, .knowledge-window-page #app { width: 100%; height: 100vh; }
.agent-window-shell { position: relative; width: 100%; height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; }
.agent-window-head { min-height: 42px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #ffffff; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; }
.agent-window-head.is-dragging { cursor: grabbing; }
.agent-window-title { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.agent-window-title strong { flex: 0 0 auto; color: var(--ink); font-size: 14px; }
.agent-window-title span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.agent-window-head .icon-button, .agent-window-head .drawer-collapse-button { width: 27px; height: 27px; flex: 0 0 auto; cursor: pointer; }
.agent-window-main { min-height: 0; flex: 1 1 auto; overflow: hidden; }
.agent-window-frame { display: block; width: 100%; height: 100%; border: 0; background: #ffffff; }

/* 子任务交付兜底重载的过渡遮罩：重载会重建整个 Pi Web 文档（连左侧会话/任务栏），
   这里用同色遮罩 + 淡出把"整体刷新"藏起来，而不是让它一闪而过。
   判定与遮罩逻辑见 src/app/agent-frame-delivery.js。 */
#agent-persistent-frame-host .agent-web-frame,
.agent-window-shell .agent-window-frame { transition: opacity .18s ease; }
#agent-persistent-frame-host.is-agent-frame-recovering .agent-web-frame,
.agent-window-shell.is-agent-frame-recovering .agent-window-frame { opacity: 0; }
.agent-frame-recovery-veil { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; color: #5b6b70; background: #ffffff; font-size: 12px; letter-spacing: .04em; }
.knowledge-standalone-view, .standalone-view { position: relative; width: 100%; height: 100vh; min-height: 0; overflow: hidden; background: #f6f8f7; }
.knowledge-standalone-view .page-view, .standalone-view .page-view { height: 100%; padding: 8px; }
.knowledge-standalone-view .page-view-body, .standalone-view .page-view-body { min-height: 0; flex: 1 1 auto; padding: 0; }
.project-sort-control select { background-position: right 2px center; padding-right: 16px; }
.page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.page-tile { min-height: 150px; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(31,52,59,.06); }
.page-tile h3 { margin: 14px 0 6px; color: var(--ink); font-size: 13px; }
.page-tile p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.page-tile-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #1b858b; background: var(--cyan-soft); border-radius: 6px; }
.page-tile-icon svg { width: 17px; height: 17px; }
.settings-list { max-width: 960px; display: flex; flex-direction: column; gap: 8px; }
.settings-list.settings-storage-layout { width: 100%; max-width: none; }
.settings-network-layout .settings-list { max-width: none; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; }
.settings-row > div { min-width: 0; flex: 1 1 auto; }
.settings-row strong, .settings-row span { display: block; }
.settings-row strong { color: var(--ink); font-size: 11px; }
.settings-row span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.settings-value { min-width: 0; max-width: 58%; flex: 0 1 auto; overflow-wrap: anywhere; color: var(--cyan); font-size: 10px; font-weight: 700; text-align: right; }

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 40; padding: 10px 14px; color: #ffffff; background: var(--ink); border-radius: 6px; box-shadow: var(--shadow); font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1450px) {
  .workflow-detail-grid, .workflow-editor-core { grid-template-columns: 1fr; }
  .workflow-runtime-panel { position: static; }
}

@media (max-width: 1180px) {
  .project-explorer-shell { grid-template-columns: minmax(160px, 20%) minmax(220px, 27%) minmax(0, 1fr); }
  .project-explorer-canvas-grid { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
  .project-explorer-content-head { flex-wrap: wrap; }
  .project-explorer-content-head > div:last-child { flex-wrap: wrap; justify-content: flex-start; }
  .agent-runtime-bar { grid-template-columns: 1fr; align-items: stretch; }
  .agent-runtime-actions { justify-content: flex-start; flex-wrap: wrap; }
  .agent-main-grid { grid-template-columns: 1fr; }
  .agent-main-grid.is-side-collapsed { grid-template-columns: 1fr; }
  .agent-side-collapse-button { display: none; }
  .agent-main-panel, .agent-side-panel, .agent-workbench, .agent-setup { min-height: 520px; }
  .agent-side-panel { min-height: 420px; }
  .settings-provider-layout, .settings-network-layout, .workflow-detail-grid, .workflow-title-row, .workflow-title-import-row, .workflow-top-grid, .workflow-editor-core, .workflow-node-grid, .comfy-import-grid, .provider-editor-grid, .provider-model-grid, .provider-identity-grid, .provider-verify-row, .provider-picker-grid, .provider-runninghub-grid, .provider-runninghub-summary, .network-migration-grid, .network-metric-grid { grid-template-columns: 1fr; }
  .provider-param-panel { grid-template-columns: 1fr; }
  .provider-validation-column { padding: 10px 0 0; border-top: 1px solid var(--soft-line); border-left: 0; }
  .provider-model-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-category-title-row, .provider-editor-head { grid-template-columns: 1fr; }
  .provider-health-detail.empty { display: none; }
  .comfy-workflow-studio .comfy-import-grid { grid-template-columns: 1fr; }
  .settings-overview-editorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-overview-panel-comfy, .settings-overview-panel-api, .settings-overview-panel-custom, .settings-overview-panel-network { grid-column: span 1; }
  .settings-overview-panel-storage { grid-column: span 2; }
  .settings-platform-list { grid-template-columns: 1fr; }
  .provider-route-setting-row { grid-template-columns: minmax(0, 1fr) 128px 96px; }
  .provider-title-actions { justify-content: flex-start; }
  .workflow-runtime-panel { position: static; }
  .workflow-runtime-canvas { max-height: none; }
  .workflow-head-side { align-items: flex-start; flex-direction: column; }
  .workflow-head-actions { justify-content: flex-start; }
  .workflow-head-stats { align-items: flex-start; }
  .workflow-inline-stats { justify-content: flex-start; }
  .workflow-field-row, .workflow-param-editor { grid-template-columns: repeat(2, minmax(0, 1fr)) 28px; }
  .workflow-param-editor .workflow-param-binding { grid-column: 1 / -1; grid-row: auto; }
  .workflow-field-row .field-options, .workflow-param-editor .field-options { grid-column: 1 / -2; }
  .workflow-field-row > .icon-button, .workflow-param-editor > .icon-button { grid-column: 3; grid-row: 1; }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .agent-main-grid { grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 312px); }
  .agent-main-grid.is-side-collapsed { grid-template-columns: minmax(0, 1fr) 42px; }
  .agent-side-collapse-button { display: flex; }
  .agent-main-panel, .agent-side-panel, .agent-workbench, .agent-setup { min-height: 0; }
  .agent-side-panel { min-height: 0; }
}

@media (max-width: 860px) {
  /* 手机端顶栏：**不再整条隐藏**，而是换成「logo + AISEFUR + 页面出口」——
     与「应用中心」「运行页」的顶栏保持同一套外观。
     PC 那套内容（面包屑 / 状态点 / 保存提示 / 画布级动作）在手机上一个都用不上，
     由 render-shell.js 在渲染时就不输出，这里只负责样式。
     页面切换靠右侧那个按钮（Agent → 应用中心）。 */
  /* 手机端顶栏的样式**不在这里** —— 已抽到唯一来源：
       public/app-center/mobile-shell.css
     三个页面（Agent / 应用中心 / 运行页）都 <link> 那一份，类名统一为 .mc-appbar。
     这样改顶栏只需改一个文件，三处同时生效，不会再出现"某个页面差 20px"。
     此处原本有一份重复定义（.topbar 与 .topbar .mc-* 系列），已删除。
     注意：PC 端仍走上面第 213 行那份 .topbar 基础样式，不受影响。 */

  /* 手机端：页头已经不渲染了（见 render-shell.js），所以 page-view 不该再留
     42px 的上内边距 —— 那正是"顶栏没有顶到页面最上面"的原因。
     同时内容区要自己撑满整屏：页头没了之后没人再给它高度，
     否则 Agent 页的对话框只占上半屏、下面空着一大块。

     ⚠️ 必须带上 `.page-view.page-view-agent` 这种**两个类**的选择器：
     上面 app.css:2524 有一条同名的 `.page-view.page-view-agent { padding: 28px ... }`，
     两个类比单个类优先级高 —— 只写 `.page-view` 的话，Agent 页那份 28px/18px
     的内边距压不下去，内容四周会露出一圈 .page-view 自己的淡蓝底色
     （user 看到的"淡蓝色的底没被 Pi Web 填满"就是这个）。
     应用中心没有专属规则，所以它一直是对的 —— 这也是"只有 Agent 页不对"的原因。 */
  .page-view,
  .page-view.page-view-agent,
  .page-view.page-view-app-center { padding: 0; display: flex; flex-direction: column; }
  /* 这里必须带上 `.page-view.page-view-agent` 前缀（三个类的选择器）：
     app.css:2530 有一条 `.page-view.page-view-agent .page-view-body { padding: 12px 0 0 }`，
     它比单个 `.page-view-body` 优先级高 —— 不这样写的话，Agent 内容区上边
     还会留 12px，四周露底色的毛病就一直在。 */
  .page-view-body,
  .page-view.page-view-agent .page-view-body { padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

  /* ---------- 手机端：Agent 页只留对话框 ----------
     手机上的目标只有一个：跟 Agent 说话。右侧那块运行面板（Agent 列表 / 日志 /
     技能）在 PC 上是调度台，在手机上只会把对话框挤出屏幕 ——
     上面 max-width:1180px 的断点还给它留了 420px 高度，等于吃掉半屏。
     这里直接不显示，主区铺满整屏。 */
  .agent-side-panel { display: none; }
  .agent-studio { gap: 0; }          /* 去掉板块间距，内容才能贴满 */
  .agent-main-grid,
  .agent-main-grid.is-side-collapsed { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .agent-main-panel, .agent-workbench, .agent-setup { min-height: 0; }
  .agent-side-collapse-button { display: none; }
  /* 手机全屏铺满：不要卡片边框和圆角，把空间全留给对话区 */
  .agent-workbench { border: 0; border-radius: 0; }

  /* 标题栏里的 Agent 切换器与页面出口：简洁到不抢对话框的位置。
     切换器宽度留上限，长名字靠 ellipsis，不能被它把「应用中心」挤出去。 */
  .agent-mobile-agent-select { min-width: 0; max-width: 44vw; height: 30px; padding: 0 6px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; text-overflow: ellipsis; }
  .agent-mobile-exit-button { flex: 0 0 auto; }

  /* ---------- 手机端知识库（只读视图，见 pages/knowledge 的 renderMobileKnowledge） ----------
     只有「笔记本」「知识问答」两个入口 + 只读搜索 + 列表；写操作一律不渲染。 */
  .mk-console { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
  .mk-tabs { display: flex; gap: 6px; }
  .mk-tabs button { flex: 1 1 0; min-height: 34px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 800; }
  .mk-tabs button.active { color: #ffffff; background: var(--ink); border-color: var(--ink); }
  .mk-search { display: flex; align-items: center; gap: 7px; padding: 0 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; }
  .mk-search svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
  .mk-search input { flex: 1 1 auto; min-width: 0; height: 38px; color: var(--ink); background: transparent; border: 0; outline: none; font-size: 12px; }
  .mk-search button { flex: 0 0 auto; min-height: 28px; padding: 0 12px; color: #ffffff; background: var(--cyan); border: 1px solid var(--cyan); border-radius: 7px; font-size: 11px; font-weight: 850; }
  .mk-error { display: flex; align-items: center; gap: 7px; padding: 9px 10px; color: #9d3e35; background: #fff7f5; border: 1px solid #edcbc5; border-radius: 7px; font-size: 11px; font-weight: 800; }
  .mk-list { display: flex; flex-direction: column; gap: 8px; }
  .mk-row { display: flex; align-items: center; gap: 9px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
  .mk-row-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: #eef7f6; color: var(--cyan); }
  .mk-row-icon svg { width: 15px; height: 15px; }
  .mk-row-copy { min-width: 0; }
  .mk-row-copy strong { display: block; overflow: hidden; color: var(--ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
  .mk-row-copy small { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
  .mk-empty { padding: 16px; color: var(--muted); background: var(--paper); border: 1px dashed var(--line); border-radius: 10px; font-size: 11.5px; text-align: center; }
  .mk-hint { margin: 0; padding: 9px 10px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-size: 10.5px; line-height: 1.6; }

  /* 笔记分类一行：横向滚动，不折行、不额外占高度 —— 手机端保持简洁 */
  .mk-cats { display: flex; gap: 6px; padding-bottom: 2px; overflow-x: auto; }
  .mk-cats::-webkit-scrollbar { height: 0; }
  .mk-cat { flex: 0 0 auto; min-height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
  .mk-cat.active { color: #ffffff; background: var(--cyan); border-color: var(--cyan); }
  .mk-cat em { font-style: normal; font-size: 10px; opacity: .75; }
  /* 笔记本的两个下拉：分类 / 分类集合（小屏上比横向滚动的按钮更清楚） */
  .mk-selects { display: flex; gap: 8px; }
  .mk-selects label { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 10.5px; font-weight: 800; }
  .mk-selects select { width: 100%; height: 32px; padding: 0 8px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 12px; }

  /* 整行可点（历史问答列表） */
  .mk-row-button { width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
  .mk-row-button > svg:last-child { width: 15px; height: 15px; flex: 0 0 auto; color: var(--faint); }

  /* 知识库搜索结果：分段标题 + 图片缩略网格 */
  .mk-section-label { margin: 2px 0 -2px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
  .mk-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
  .mk-thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; color: #6f8a90; background: #eef2f3; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .mk-thumb svg { width: 18px; height: 18px; }
  .mk-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
  /* 图片放大查看：全屏深色浮层，点任意处关闭 */
  .mk-image-viewer { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 14px; background: rgba(12, 20, 24, .88); }
  .mk-image-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
  .mk-image-viewer-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; color: #ffffff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; cursor: pointer; }
  .mk-image-viewer-close svg { width: 16px; height: 16px; }
  /* 笔记只读预览（手机端）：头部（返回 + 标题 + 亮/暗切换）+ 元信息 + 正文。
     内容与桌面端预览页保持一致 —— 不显示摘要，也不显示标签。 */
  .mk-note-preview { display: flex; flex-direction: column; gap: 9px; }
  .mk-note-preview .mk-note-editor-head strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 正文自己滚：手机上外层容器不一定滚得动，给一个视口内的上限最稳 */
  .mk-note-preview-body { max-height: calc(100vh - 130px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; line-height: 1.7; }
  .mk-note-preview-body img { max-width: 100%; max-height: 200px; width: auto; height: auto; display: block; margin: 10px auto; border-radius: 6px; background: #eef2f3; cursor: zoom-in; }
  .mk-note-preview-body h1, .mk-note-preview-body h2, .mk-note-preview-body h3 { margin: .6em 0 .3em; font-size: 14px; }
  .mk-note-preview-body pre { padding: 8px 10px; overflow: auto; background: #f1f6f6; border-radius: 6px; font-size: 11px; }
  /* 暗色：取值与桌面端预览页的暗色主题对齐 */
  .mk-note-preview[data-mk-note-theme="dark"] .mk-note-preview-body { color: #eceff0; background: #2e3539; border-color: #454d52; }
  .mk-note-preview[data-mk-note-theme="dark"] .mk-note-preview-body a { color: #9cc6ca; }
  .mk-note-preview[data-mk-note-theme="dark"] .mk-note-preview-body pre,
  .mk-note-preview[data-mk-note-theme="dark"] .mk-note-preview-body code { color: #dfe4e5; background: #363e43; }
  .mk-note-preview[data-mk-note-theme="dark"] .mk-note-preview-body blockquote { color: #a9b0b3; border-left-color: #55636a; }
  .mk-note-preview[data-mk-note-theme="dark"] .mk-note-preview-body img { background: #2a3135; border: 1px solid #454f54; }

  /* 资产库（手机端只读页）：两类切换 + 图格 + 全屏查看器（缩放 / 对比 / 下载） */
  .ma-console { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
  /* 两个分类标题滚动时固定在顶部。
     margin-top 负值与 padding 抵消，让背景能一直盖到视口顶、不露出从下方滚过的内容。 */
  .ma-tabs { position: sticky; top: 0; z-index: 5; margin-top: -12px; padding: 12px 0 6px; display: flex; gap: 6px; background: var(--canvas); }
  .ma-tabs button { flex: 1 1 0; min-height: 32px; padding: 0 4px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
  .ma-tabs button.active { color: #ffffff; background: var(--cyan); border-color: var(--cyan); }
  /* 四列图格：手机上一屏能看到更多资产；格子变窄，内边距与字号同步收一点 */
  .ma-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  /* min-width:0 + overflow:hidden 是关键兜底：
     grid/flex 子项默认 min-width:auto，内容会把卡片顶宽；overflow 让卡片自己裁掉
     任何溢出的内容 —— 这样即便文字层没被正确压窄，图名也绝不可能超出卡片边界。 */
  .ma-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; padding: 4px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; cursor: pointer; }
  .ma-cell-thumb { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; color: var(--muted); background: #eef2f3; border-radius: 6px; }
  .ma-cell-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .ma-cell-copy { display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; overflow: hidden; }
  /* 图名只占卡片宽度的 80%，超出直接截断成省略号。
     显式 block + width，再叠一层自身 overflow，不依赖父容器的宽度链路。 */
  .ma-cell-copy strong { display: block; width: 80%; max-width: 100%; overflow: hidden; color: var(--ink); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
  .ma-cell-copy small { display: block; width: 80%; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .ma-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px; color: var(--muted); text-align: center; font-size: 12px; }
  .ma-empty i { width: 22px; height: 22px; }
  .ma-empty small { font-size: 10.5px; opacity: .8; }
  .ma-error { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #9a3b3b; background: #fdf1f1; border: 1px solid #f0d6d6; border-radius: 8px; font-size: 12px; }
  .ma-hint { margin: 0; color: var(--muted); font-size: 10.5px; }
  .ma-viewer { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: rgba(12, 16, 18, .94); }
  /* touch-action:none 是滑动换图与捏合缩放的前提：
     1) 只给舞台加**不够** —— 手指落在 <img> 上时，接管手势的是 img 自己的 touch-action
        （默认 auto），表现就是「捏合缩放的是整个网页」而不是图片，所以用 * 覆盖舞台内全部元素；
     2) 不禁用的话，浏览器会把滑动当成滚动接管，只发 pointercancel、不发 pointerup。 */
  .ma-viewer-stage,
  .ma-viewer-stage * { touch-action: none; }
  .ma-viewer-stage { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; }
  .ma-viewer-surface { position: relative; display: grid; place-items: center; max-width: 100%; max-height: 100%; }
  .ma-viewer-image { grid-area: 1 / 1; max-width: 100%; max-height: 100%; object-fit: contain; }
  .ma-viewer-original { position: absolute; inset: 0; margin: auto; }
  .ma-viewer-handle { position: absolute; top: 0; bottom: 0; width: 30px; margin-left: -15px; display: grid; place-items: center; color: #ffffff; cursor: ew-resize; touch-action: none; }
  .ma-viewer-handle::before { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .85); }
  .ma-viewer-handle i { width: 15px; height: 15px; padding: 3px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; }
  .ma-viewer-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px 14px; }
  .ma-viewer-button { width: 36px; height: 36px; display: grid; place-items: center; color: #ffffff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; cursor: pointer; }
  .ma-viewer-button.active { color: #0d1518; background: #ffffff; }
  .ma-viewer-zoom { min-width: 54px; height: 36px; color: #ffffff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; font-family: inherit; font-size: 11px; }
  /* 预览页底部这行显示的也是图名，同样只占 80% 并截断 */
  .ma-viewer-caption { width: 80%; margin: 0 auto 10px; overflow: hidden; color: rgba(255, 255, 255, .8); text-align: center; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

  /* 对话窗口：头部 + 只读消息流 + 提问框 */
  .mk-chat-head { display: flex; align-items: center; gap: 8px; }
  .mk-chat-head strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
  .mk-back { flex: 0 0 auto; min-height: 28px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
  .mk-back svg { width: 13px; height: 13px; }
  .mk-msgs { max-height: 50vh; display: flex; flex-direction: column; gap: 8px; padding: 2px; overflow-y: auto; }
  .mk-msg { display: flex; }
  .mk-msg.is-user { justify-content: flex-end; }
  .mk-msg-body { max-width: 88%; padding: 8px 10px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
  .mk-msg.is-user .mk-msg-body { background: #e6f2f5; border-color: #cfe3e6; }
  .mk-compose { display: flex; gap: 8px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
  .mk-compose input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
  .mk-compose button { flex: 0 0 auto; padding: 0 14px; color: #ffffff; background: var(--cyan); border: 1px solid var(--cyan); border-radius: 8px; font-size: 11.5px; font-weight: 850; }
  .mk-compose button:disabled { opacity: .6; }

  /* 手机端「新建笔记」：操作条 + 编辑器 + 离开提醒（手机端唯一开放的写入口） */
  .mk-actions { display: flex; gap: 8px; }
  .mk-actions .run-button { flex: 1 1 auto; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 12px; color: #ffffff; background: var(--cyan); border: 1px solid var(--cyan); border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
  .mk-actions .run-button svg { width: 14px; height: 14px; }
  .mk-note-editor { display: flex; flex-direction: column; gap: 10px; }
  .mk-note-editor-head { display: flex; align-items: center; gap: 8px; }
  .mk-note-editor-head strong { color: var(--ink); font-size: 12.5px; font-weight: 850; }
  .mk-note-field { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
  .mk-note-field input, .mk-note-field textarea { width: 100%; padding: 8px 10px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 12.5px; line-height: 1.6; }
  .mk-note-field textarea { min-height: 168px; resize: vertical; }
  .mk-note-actions { display: flex; gap: 8px; }
  .mk-note-actions .run-button { flex: 1 1 auto; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 12px; color: #ffffff; background: var(--cyan); border: 1px solid var(--cyan); border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 850; cursor: pointer; }
  .mk-note-actions .run-button:disabled { opacity: .6; }
  .mk-note-leave { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgba(20, 35, 40, .42); }
  .mk-note-leave section { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #ffffff; border-radius: 12px; box-shadow: 0 18px 48px rgba(20, 35, 40, .22); }
  .mk-note-leave strong { color: var(--ink); font-size: 13px; }
  .mk-note-leave p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
  .mk-note-leave footer { display: flex; flex-wrap: wrap; gap: 8px; }
  .mk-note-leave footer button { flex: 1 1 auto; min-height: 32px; padding: 0 10px; border-radius: 8px; font-family: inherit; font-size: 11.5px; font-weight: 850; cursor: pointer; }
  .mk-note-leave .outline-button { color: var(--muted); background: #ffffff; border: 1px solid var(--line); }
  .mk-note-leave .outline-button.danger { color: #a8443f; border-color: #e3b6b1; }
  .mk-note-leave .run-button { color: #ffffff; background: var(--cyan); border: 1px solid var(--cyan); }

  .drawer[data-drawer-id="assets"] { width: 100%; max-width: 100%; }
  .drawer[data-drawer-id="assets"] .drawer-body { padding: 8px; }
  .asset-floating-panel { left: 8px !important; right: 8px; top: 8px !important; bottom: 8px; width: auto !important; height: auto !important; min-width: 0; min-height: 0; }
  .asset-floating-panel .drawer-body { padding: 8px; }
  .asset-floating-resize { display: none; }
  .asset-body { flex-direction: column; }
  .asset-left-bar { width: auto; flex: 0 0 auto; max-height: 132px; border-right: 0; border-bottom: 1px solid var(--line); }
  .asset-category-row.has-drop { grid-template-columns: 1fr; }
  .asset-drop-zone { min-height: 48px; }
  .asset-prompt-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .asset-prompt-workspace { grid-template-columns: 1fr; }
  .asset-prompt-list { max-height: 160px; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 260px; min-width: 260px; max-width: calc(100vw - 44px); margin-left: 0; transform: translateX(-102%); box-shadow: 18px 0 48px rgba(20,35,40,.22); transition: transform .24s var(--ease); }
  .sidebar-is-collapsed .sidebar, .sidebar-is-collapsed .sidebar:hover, .sidebar-is-collapsed .sidebar:focus-within { margin-left: 0; }
  .sidebar-resize-handle { display: none; }
  .sidebar.open { transform: translateX(0); }
  .mobile-menu { display: inline-flex; }
  /* 这里原本是 .topbar { padding: 0 14px } —— 上下内边距被抹成 0，
     顶栏因此比应用中心那边矮一截。左右收窄也已经由上面那条手机端规则
     给出（16px），所以这条整个删掉，不再覆盖。 */
  #projectCrumb, #sectionCrumb, .breadcrumb-project-chevron, .breadcrumb-section-chevron, .canvas-id-pill, .save-indicator { display: none; }
  .topbar-actions { gap: 6px; }
  .service-status { width: 32px; padding: 0; justify-content: center; }
  .service-status > span:not(.service-dot) { display: none; }
  .topbar-actions #projectCenterButton span { display: none; }
  .topbar-actions #projectCenterButton { width: 34px; padding: 0; }
  .topbar-actions #newCanvasButton span { display: none; }
  .topbar-actions #newCanvasButton { width: 34px; padding: 0; }
  .topbar-actions .outline-button span, .topbar-actions .run-button span { display: none; }
  .topbar-actions .outline-button, .topbar-actions .run-button { width: 34px; padding: 0; }
  .canvas-meta { top: 16px; left: 14px; right: 14px; }
  .canvas-meta h1 { font-size: 15px; }
  .canvas-meta p { display: none; }
  .canvas-meta-button span { display: none; }
  .canvas-meta-button { width: 34px; padding: 0; }
  .canvas-tool-compass { transform: scale(.9); transform-origin: top left; }
  .compass-orbit-tool::after { display: none; }
  .canvas-origin { top: 190px; left: 14px; width: 6000px; height: 4000px; }
  .canvas-node { width: 276px; }
  .connection-layer, .connection-focus-layer, .connection-control-layer { width: 6000px; height: 4000px; }
  .canvas-controls { right: 14px; bottom: 46px; }
  /* 手机端：页内不留任何边距 —— 内容自己撑满整屏，四周才不会露出
     .page-view 的底色（那层淡蓝）。
     这两条原本是 26px 18px，与上面同断点内写的 `padding: 0` 冲突，
     且位置更靠后 —— 实际生效的一直是这里，这就是"改了还是没充满"的原因。 */
  .page-view { padding: 0; }
  .page-view.page-view-agent { padding: 0; }
  .agent-studio { min-height: auto; }
  .agent-setup { grid-template-columns: 1fr; padding: 16px; }
  .agent-setup-copy h2 { font-size: 20px; }
  .agent-runtime-paths { display: none; }
  .agent-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-tabs button { justify-content: flex-start; }
  .agent-role-editor-overlay { padding: 10px; }
  .agent-role-editor { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .agent-role-field-grid { grid-template-columns: 1fr; }
  .agent-personal-capability-grid, .agent-personal-resource-grid { grid-template-columns: 1fr; }
  .agent-image-generation-grid, .agent-image-generation-toggles, .agent-vision-analysis-grid { grid-template-columns: 1fr; }
  .agent-main-panel, .agent-side-panel, .agent-workbench, .agent-setup { min-height: 460px; }
  .agent-workbench { height: calc(100vh - 220px); }
  .app-center-page-shell { height: 100%; min-height: 0; }
  .page-grid { grid-template-columns: 1fr; }
  .settings-layout { gap: 16px; }
  .settings-section-toolbar { flex-direction: column; align-items: stretch; }
  .settings-section-toolbar > .outline-button { width: 100%; }
  .settings-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .settings-tab { flex: 0 0 auto; }
  .settings-overview-editorial-grid { grid-template-columns: 1fr; }
  .settings-overview-panel-comfy, .settings-overview-panel-api, .settings-overview-panel-storage, .settings-overview-panel-custom, .settings-overview-panel-network { grid-column: 1; min-height: auto; }
  .settings-overview-panel { padding: 16px; }
  .settings-model-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-path-line { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; }
  .settings-overview-user-head { display: none; }
  .settings-overview-user-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; padding: 9px 10px; }
  .settings-overview-user-storage { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid var(--soft-line); }
  .settings-storage-summary { grid-template-columns: 34px minmax(0, 1fr) 16px; }
  .settings-storage-summary em { grid-column: 2; max-width: none; text-align: left; }
  .settings-storage-summary-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .storage-section-head { flex-direction: column; align-items: stretch; }
  .storage-section-title h3 em { display: block; margin: 5px 0 0; }
  .storage-section-title small, .storage-inline-subhead small { white-space: normal; }
  .storage-section-side { justify-content: space-between; }
  .settings-storage-summary-copy small, .settings-storage-subsection > summary small { white-space: normal; }
  .storage-mini-row, .storage-readonly-path-row, .storage-path-input-row { grid-template-columns: 1fr; align-items: stretch; }
  .storage-mini-value { justify-content: flex-start; }
  .storage-mini-value strong, .storage-readonly-path-row code { text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .storage-readonly-path-row { grid-template-columns: minmax(0, 1fr) 30px; }
  .storage-readonly-path-row > div { grid-column: 1 / -1; }
  .settings-storage-subsection > summary { grid-template-columns: minmax(0, 1fr) 16px; }
  .settings-storage-subsection > summary small { grid-column: 1; }
  .settings-storage-subsection > summary svg { grid-column: 2; grid-row: 1 / span 2; }
  .custom-tool-group-grid, .custom-mouse-grid { grid-template-columns: 1fr; }
  .settings-provider-layout, .settings-network-layout, .workflow-detail-grid, .workflow-title-row, .workflow-title-import-row, .workflow-top-grid, .workflow-editor-core, .workflow-node-grid, .workflow-test-grid, .provider-identity-grid, .provider-verify-row, .provider-model-category-grid, .provider-picker-grid, .provider-runninghub-grid, .provider-runninghub-summary, .network-migration-grid, .network-metric-grid { grid-template-columns: 1fr; }
  .workflow-category-title-row, .provider-editor-head { grid-template-columns: 1fr; }
  .workflow-category-title-row .workflow-title-select { grid-template-columns: 1fr; }
  .comfy-workflow-studio .comfy-import-grid { grid-template-columns: 1fr; }
  .admin-user-row { flex-direction: column; align-items: stretch; }
  .settings-row > .admin-user-actions { width: 100%; max-width: none; justify-content: flex-start; }
  .workflow-studio-head { align-items: flex-start; flex-direction: column; }
  .workflow-head-side { align-items: flex-start; flex-direction: column; }
  .workflow-head-actions { justify-content: flex-start; }
  .provider-editor-head { align-items: flex-start; flex-direction: column; }
  .provider-head-controls { width: 100%; justify-content: space-between; }
  .provider-title-actions { width: 100%; justify-content: flex-start; }
  .workflow-head-stats { min-width: 0; align-items: flex-start; }
  .workflow-head-stats span { white-space: normal; }
  .workflow-import-inline { justify-content: flex-start; }
  .workflow-inline-stats { justify-content: flex-start; }
  .workflow-parameter-head { align-items: flex-start; }
  .workflow-parameter-stats { margin-left: 0; flex-wrap: wrap; justify-content: flex-start; white-space: normal; }
  .workflow-structure-list { max-height: none; }
  .workflow-field-row, .workflow-param-editor { grid-template-columns: repeat(2, minmax(0, 1fr)) 28px; }
  .workflow-param-editor .workflow-param-binding { grid-column: 1 / -1; grid-row: auto; }
  .workflow-field-row .field-options, .workflow-param-editor .field-options { grid-column: 1 / -2; }
  .media-preview-dialog, .media-editor-dialog, .media-timeline-dialog, .output-cleaner-dialog, .trace-dialog, .shortcut-dialog, .backend-log-dialog, .backend-console-dialog { width: calc(100vw - 28px); height: calc(100vh - 28px); max-height: none; }
  .media-preview-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .media-preview-meta { max-height: 210px; border-left: 0; border-top: 1px solid var(--line); }
  .media-timeline-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .media-timeline-panel { max-height: 260px; border-left: 0; border-top: 1px solid var(--line); }
  .media-timeline-actions { grid-template-columns: 1fr; }
  .media-editor-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .media-editor-side { max-height: 210px; border-left: 0; border-top: 1px solid var(--line); }
  .media-editor-image-wrap img { max-height: calc(100vh - 330px); }
  .media-lineage-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .media-lineage-side { max-height: 210px; border-left: 0; border-top: 1px solid var(--line); }
  .media-lineage-replay { margin-top: 0; }
  .asset-section-tabs { grid-template-columns: 1fr; }
  .output-cleaner-row { grid-template-columns: 24px 46px minmax(0, 1fr); }
  .output-cleaner-thumb { width: 46px; height: 42px; }
  .output-cleaner-size, .output-cleaner-status { display: none; }
  .output-cleaner-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .output-cleaner-summary { margin-left: 0; width: 100%; }
  .trace-dialog header, .trace-head-actions { align-items: flex-start; }
  .trace-summary, .trace-row-body { grid-template-columns: 1fr 1fr; }
  .shortcut-row { grid-template-columns: 1fr; align-items: flex-start; }
  .backend-log-status, .backend-console-meta { grid-template-columns: 1fr; }
  .backend-dialog-title-row strong { font-size: 15px; }
  .backend-log-dialog header small, .backend-console-dialog header small { max-width: 58vw; }
  .generation-log-card { grid-template-columns: 1fr; }
  .generation-log-thumbs { width: 100%; justify-content: start; grid-template-columns: repeat(6, 44px); }
  .generation-log-thumb { width: 44px; height: 44px; }
  .drawer-action-grid { grid-template-columns: 1fr; }
  .project-center { padding: 12px; }
  .project-center-panel { width: 100%; height: calc(100vh - 24px); }
  .project-center-head { align-items: flex-start; }
  .project-center-actions { flex-wrap: wrap; justify-content: flex-end; }
  .center-create-panel { grid-template-columns: 1fr; }
  .center-create-actions { justify-content: flex-start; }
  .project-center-body { grid-template-columns: 1fr; }
  .project-center-body { grid-template-rows: auto minmax(0, 1fr); }
  .project-center-rail { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .center-rail-summary { display: none; }
  .center-rail-label { display: none; }
  .center-rail-block { flex-direction: row; flex: 0 0 auto; }
  .center-scope-button { width: 150px; }
  .project-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .current-canvas-strip, .center-section-head, .project-detail-head { align-items: stretch; flex-direction: column; }
  .project-center-main-explorer { overflow: auto; }
  .project-explorer-page { min-height: auto; flex: 0 0 auto; overflow: visible; }
  .project-explorer-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow: visible; }
  .project-explorer-projects, .project-explorer-tree, .project-explorer-content { overflow: visible; border-right: 0; }
  .project-explorer-projects, .project-explorer-tree { border-bottom: 1px solid var(--line); }
  .project-explorer-project-list { height: auto; max-height: 180px; overflow: auto; }
  .project-explorer-directory-list { height: auto; max-height: 260px; overflow: auto; }
  .project-explorer-content { padding: 0 12px 12px; }
  .project-explorer-content-head { align-items: center; flex-direction: row; margin: 0 -12px; }
  .project-explorer-content-head > div:last-child { justify-content: flex-start; }
  .project-explorer-canvas-grid { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
  .project-overview-top { align-items: center; flex-direction: row; }
  .project-overview-title { align-items: center; }
  .current-archive-tools, .folder-card-actions, .project-detail-actions, .project-list-controls { justify-content: flex-start; flex-wrap: wrap; }
  .project-folder-list { margin-left: 0; padding-left: 8px; }
  .project-folder-canvas-list { margin-left: 10px; }
  .project-canvas-row { grid-template-columns: minmax(0, 1fr) auto; }
  .center-canvas-actions { justify-content: flex-end; padding: 0; }
}

@media (max-width: 620px) {
  .project-center-main { padding: 14px 12px 18px; }
  .project-explorer-canvas-grid { grid-template-columns: 1fr; }
  .project-explorer-content-head > div:last-child { align-items: center; flex-direction: row; }
  .provider-config-row { grid-template-columns: 1fr; align-items: stretch; }
  .provider-key-cell, .provider-key-row { grid-template-columns: 1fr; }
  .provider-verify-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-generation-probe, .provider-generation-checks { grid-template-columns: 1fr; }
  .provider-model-row.has-route-priority { grid-template-columns: minmax(0, 1fr) minmax(76px, .7fr) 22px; }
  .provider-model-row.has-route-priority > .provider-model-name-input { grid-column: 1; grid-row: 1; }
  .provider-model-row.has-route-priority > .provider-model-alias-input { grid-column: 2; grid-row: 1; }
  .provider-model-row.has-route-priority > .provider-model-resolution-inline { grid-column: 1 / 3; grid-row: 2; }
  /* 「首选 / 备用」路由框已删除：价格独占第三行 */
  .provider-model-row.has-route-priority > .provider-model-price-control { grid-column: 1 / 3; grid-row: 3; }
  .provider-model-row.has-route-priority > .icon-button { grid-column: 3; grid-row: 1; }
}

.page-view-knowledge .page-view-body { min-height: 0; overflow: hidden; }
.page-view-knowledge .page-view-head-actions { flex: 1; }
.knowledge-external-window-button { flex: 0 0 auto; }
.knowledge-external-window-button svg { width: 13px; height: 13px; }
.knowledge-console { width: 100%; min-height: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.knowledge-alert { min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; color: #8c3040; background: #fff4f4; border: 1px solid #edc8ce; border-radius: 7px; font-size: 11px; line-height: 1.5; }
.knowledge-alert svg { width: 15px; height: 15px; flex: 0 0 auto; }
.knowledge-header-notice { min-width: 0; max-width: min(620px, 48vw); min-height: 28px; display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; color: #256744; background: #f0faf4; border: 1px solid #bfe2cc; border-radius: 6px; font-size: 10px; line-height: 1.35; }
.knowledge-header-notice.warning { color: #795718; background: #fff9e9; border-color: #ead69e; }
.knowledge-header-notice > svg { width: 13px; height: 13px; flex: 0 0 auto; }
.knowledge-header-notice > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-header-notice > button { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; color: inherit; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.knowledge-header-notice > button:hover { background: rgba(40,90,70,.08); }
.knowledge-header-notice > button svg { width: 11px; height: 11px; }
.knowledge-status-dot { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 999px; background: #96a5a8; box-shadow: 0 0 0 4px rgba(150,165,168,.13); }
.knowledge-status-dot.ready { background: #279765; box-shadow: 0 0 0 4px rgba(39,151,101,.14); }
.knowledge-status-dot.working { background: #c78b2d; box-shadow: 0 0 0 4px rgba(199,139,45,.14); }
.knowledge-status-dot.warning { background: #b34a57; box-shadow: 0 0 0 4px rgba(179,74,87,.13); }
.knowledge-third-party-strip { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 5px 3px 9px; color: #738286; background: #fafbfa; border: 1px solid var(--soft-line); border-radius: 7px; font-size: 9px; font-weight: 800; }
.knowledge-third-party-strip span { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-third-party-strip span svg { width: 12px; height: 12px; flex: 0 0 auto; color: #786530; }
.knowledge-third-party-strip .icon-button { width: 24px; height: 24px; flex: 0 0 auto; }
.knowledge-third-party-strip .icon-button svg { width: 12px; height: 12px; }
.knowledge-workbench { min-height: 400px; height: auto; flex: 1 1 auto; display: grid; grid-template-columns: 237px minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.knowledge-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #f7f9f8; border-right: 1px solid var(--soft-line); }
.knowledge-sidebar-runtime { padding: 11px 10px 10px; border-bottom: 1px solid var(--soft-line); }
.knowledge-sidebar-project { min-width: 0; display: flex; align-items: center; gap: 4px; margin: -3px -2px 10px; padding: 6px 5px 6px 7px; background: #f0f5f4; border: 1px solid #dce7e5; border-radius: 6px; }
.knowledge-sidebar-project-copy { min-width: 0; flex: 1; }
.knowledge-sidebar-project-copy > span, .knowledge-sidebar-project-copy > small { display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-sidebar-project-copy > span { gap: 5px; color: #315b61; font-size: 9px; font-weight: 900; }
.knowledge-sidebar-project-copy > span svg { width: 11px; height: 11px; flex: 0 0 auto; color: #287f85; }
.knowledge-sidebar-project-copy > small { margin-top: 3px; color: #78898d; font-family: Consolas, monospace; font-size: 8px; }
.knowledge-sidebar-project-actions { display: flex; flex: 0 0 auto; gap: 1px; }
.knowledge-sidebar-project-actions .icon-button { width: 23px; height: 23px; color: #587075; background: transparent; border: 0; }
.knowledge-sidebar-project-actions .icon-button:hover { color: #246f75; background: #fff; }
.knowledge-sidebar-project-actions .icon-button svg { width: 11px; height: 11px; }
.knowledge-sidebar-status { min-width: 0; display: flex; align-items: center; gap: 10px; }
.knowledge-sidebar-status > div { min-width: 0; }
.knowledge-sidebar-status strong, .knowledge-sidebar-status small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-sidebar-status strong { color: #20363d; font-size: 12px; }
.knowledge-sidebar-status small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.knowledge-sidebar-runtime-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.knowledge-sidebar-runtime-actions :is(.run-button, .outline-button) { min-width: 0; min-height: 29px; justify-content: center; gap: 5px; padding: 0 6px; font-size: 9px; }
.knowledge-sidebar-runtime-actions :is(.run-button, .outline-button) svg { width: 12px; height: 12px; flex: 0 0 auto; }
.knowledge-sidebar-runtime-actions > :first-child:nth-last-child(2), .knowledge-sidebar-runtime-actions .knowledge-open-wiki { grid-column: 1 / -1; }
.knowledge-tabs { min-width: 0; min-height: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; padding: 8px; }
.knowledge-tabs button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 9px; color: #617377; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 800; text-align: left; }
.knowledge-tabs button:hover, .knowledge-tabs button.active { color: #153d43; background: #e5f2f1; }
.knowledge-tabs button.active { box-shadow: inset 3px 0 0 #238b91; }
.knowledge-tabs svg { width: 14px; height: 14px; flex: 0 0 auto; }
.knowledge-tabs button small { min-width: 18px; margin-left: auto; padding: 2px 5px; color: #286f75; background: #fff; border-radius: 999px; font-size: 9px; text-align: center; }
.knowledge-panel { min-width: 0; min-height: 0; overflow: auto; padding: 12px; }
.knowledge-panel.knowledge-chat-host { overflow: hidden; padding: 0; }
.knowledge-chat-panel { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-columns: 214px minmax(0, 1fr); background: #fff; }
.knowledge-chat-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #f8faf9; border-right: 1px solid var(--soft-line); }
.knowledge-chat-sidebar > header { min-height: 54px; display: flex; align-items: center; gap: 8px; padding: 8px 9px 8px 11px; border-bottom: 1px solid var(--soft-line); }
.knowledge-chat-sidebar > header > div { min-width: 0; flex: 1; }
.knowledge-chat-sidebar > header strong, .knowledge-chat-sidebar > header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-chat-sidebar > header strong { color: #2b464c; font-size: 12px; }
.knowledge-chat-sidebar > header span { margin-top: 3px; color: #819094; font-size: 11px; }
.knowledge-chat-sidebar > header .icon-button { width: 29px; height: 29px; flex: 0 0 auto; }
.knowledge-chat-sidebar > label { display: flex; flex-direction: column; gap: 4px; padding: 8px 9px; border-bottom: 1px solid var(--soft-line); }
.knowledge-chat-sidebar > label > span { color: #78898d; font-size: 11px; font-weight: 800; }
.knowledge-chat-sidebar select { width: 100%; height: 29px; min-width: 0; padding: 0 25px 0 7px; color: #3e565b; background: #fff; border: 1px solid #dbe4e2; border-radius: 6px; font-size: 10px; }
.knowledge-chat-session-list { min-height: 0; flex: 1; overflow: auto; padding: 6px; }
.knowledge-chat-session { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 25px 25px; align-items: center; gap: 1px; margin-bottom: 2px; border-radius: 6px; }
.knowledge-chat-session:hover, .knowledge-chat-session.active { background: #e8f2f1; }
.knowledge-chat-session.active { box-shadow: inset 3px 0 0 #27878d; }
.knowledge-chat-session-main { min-width: 0; min-height: 43px; display: flex; align-items: center; gap: 7px; padding: 5px 4px 5px 9px; color: #486066; background: transparent; border: 0; cursor: pointer; text-align: left; }
.knowledge-chat-session-main > svg { width: 13px; height: 13px; flex: 0 0 auto; color: #4b9296; }
.knowledge-chat-session-main > span { min-width: 0; }
.knowledge-chat-session-main strong, .knowledge-chat-session-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-chat-session-main strong { font-size: 12px; font-weight: 800; }
.knowledge-chat-session-main small { margin-top: 3px; color: #89979a; font-size: 11px; }
.knowledge-chat-session .icon-button { width: 24px; height: 24px; visibility: hidden; color: #6a7d81; background: transparent; border: 0; }
.knowledge-chat-session:hover .icon-button, .knowledge-chat-session.active .icon-button { visibility: visible; }
.knowledge-chat-session .icon-button svg { width: 11px; height: 11px; }
.knowledge-chat-session .icon-button.danger:hover { color: #a84545; background: #fff0f0; }
.knowledge-chat-session-empty { min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #899699; font-size: 11px; }
.knowledge-chat-session-empty svg { width: 16px; height: 16px; animation: agent-spin .9s linear infinite; }
.knowledge-chat-sidebar > footer { min-height: 33px; display: flex; align-items: center; gap: 6px; padding: 0 10px; color: #819094; border-top: 1px solid var(--soft-line); font-size: 9px; }
.knowledge-chat-sidebar > footer svg { width: 12px; height: 12px; color: #4b9296; }
.knowledge-chat-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: 54px minmax(0, 1fr) auto; }
.knowledge-chat-main > header { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 11px 7px 15px; border-bottom: 1px solid var(--soft-line); }
.knowledge-chat-main > header > div { min-width: 0; flex: 1; }
.knowledge-chat-main > header strong, .knowledge-chat-main > header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-chat-main > header strong { color: #293f45; font-size: 12px; }
.knowledge-chat-main > header span { margin-top: 3px; color: #839195; font-size: 11px; }
.knowledge-chat-main > header .outline-button { min-height: 29px; padding: 0 8px; font-size: 11px; }
.knowledge-chat-main > header .outline-button svg { width: 12px; height: 12px; }
.knowledge-chat-main > header > .icon-button { width: 29px; height: 29px; flex: 0 0 auto; }
.knowledge-chat-main > header > .icon-button svg { width: 12px; height: 12px; }
.knowledge-chat-messages { min-width: 0; min-height: 0; overflow: auto; padding: 15px clamp(15px, 3vw, 38px) 22px; scroll-behavior: smooth; }
.knowledge-chat-welcome { width: min(520px, 100%); min-height: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6f8286; text-align: center; }
.knowledge-chat-welcome > span { width: 42px; height: 42px; display: grid; place-items: center; color: #287f85; background: #e7f2f1; border-radius: 8px; }
.knowledge-chat-welcome > span svg { width: 20px; height: 20px; }
.knowledge-chat-welcome > strong { margin-top: 11px; color: #2d474d; font-size: 14px; }
.knowledge-chat-welcome > p { max-width: 420px; margin: 6px 0 13px; font-size: 11px; line-height: 1.6; }
.knowledge-chat-welcome > div { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.knowledge-chat-welcome button { min-height: 29px; padding: 0 9px; color: #446268; background: #fff; border: 1px solid #dce5e3; border-radius: 6px; cursor: pointer; font-size: 9px; }
.knowledge-chat-welcome button:hover { color: #236f75; background: #f1f8f7; border-color: #bcd6d3; }
.knowledge-chat-message { width: min(820px, 100%); margin: 0 auto 16px; }
.knowledge-chat-message > header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: #4f696f; }
.knowledge-chat-message > header > span { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 400; }
.knowledge-chat-message > header svg { width: 14px; height: 14px; color: #2f858a; }
.knowledge-chat-message > header time { margin-left: auto; color: #97a2a4; font-size: 11px; }
.knowledge-chat-message.user { width: min(650px, 88%); margin-right: 0; }
.knowledge-chat-message.user > header { justify-content: flex-end; }
.knowledge-chat-message.user > header time { order: -1; margin: 0; }
.knowledge-chat-user-content { padding: 9px 11px; color: #29474d; background: #e9f3f2; border: 1px solid #d6e7e4; border-radius: 7px 2px 7px 7px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.knowledge-chat-answer { color: #314c52; font-size: 14px; line-height: 2.5; overflow-wrap: anywhere; }
.knowledge-chat-answer :is(h1, h2, h3, h4) { margin: 1.1em 0 .5em; color: #203b41; line-height: 1.35; }
.knowledge-chat-answer h1 { font-size: 18px; }
.knowledge-chat-answer h2 { padding-bottom: 5px; border-bottom: 1px solid var(--soft-line); font-size: 15px; }
.knowledge-chat-answer h3 { font-size: 14px; }
.knowledge-chat-answer h4 { font-size: 12px; }
.knowledge-chat-answer p { margin: 0 0 .7em; white-space: pre-wrap; }
.knowledge-chat-answer pre { overflow: auto; margin: 9px 0; padding: 10px; color: #dbe8e9; background: #263b40; border-radius: 6px; font: 10px/1.6 Consolas, monospace; }
.knowledge-chat-answer blockquote { margin: 8px 0; padding: 7px 9px; color: #60777c; background: #f5f8f8; border-left: 3px solid #65aeb1; }
.knowledge-chat-references { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--soft-line); }
.knowledge-chat-references > strong { display: block; margin-bottom: 5px; color: #62777c; font-size: 10px; font-weight: 400; }
.knowledge-chat-references > article { width: 100%; min-width: 0; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 5px; align-items: center; padding: 2px 4px; color: #415d63; border-bottom: 1px solid #edf2f1; }
.knowledge-chat-references > article:hover { background: #f8fbfa; }
.knowledge-chat-references > article > span { width: 13px; height: 13px; display: grid; place-items: center; color: #337d82; background: #e7f2f1; border-radius: 3px; font-size: 8px; font-weight: 400; }
.knowledge-chat-references > article > div { min-width: 0; }
.knowledge-chat-references :is(strong, small, p) { display: block; overflow: hidden; margin: 0; text-overflow: ellipsis; }
.knowledge-chat-references strong { font-size: 10px; font-weight: 400; line-height: 1.2; white-space: nowrap; }
.knowledge-chat-references small { margin-top: 0; color: #7f9093; font-size: 10px; line-height: 1; white-space: nowrap; }
.knowledge-chat-references p { margin-top: 0; color: #718589; font-size: 10px; line-height: 1; white-space: normal; }
.knowledge-chat-references em { color: #769093; font-size: 10px; font-style: normal; line-height: 1; }
.knowledge-chat-references footer { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.knowledge-chat-references footer button { min-height: 25px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; color: #45686d; background: #fff; border: 1px solid #d9e5e3; border-radius: 5px; cursor: pointer; font: inherit; font-size: 10px; font-weight: 400; }
.knowledge-chat-references footer button:hover { color: #176d73; background: #eef8f7; border-color: #add2cf; }
.knowledge-chat-references footer button svg { width: 10px; height: 10px; }
.knowledge-chat-message.loading > div { display: flex; align-items: center; gap: 7px; color: #718589; font-size: 10px; }
.knowledge-chat-message.loading > div svg { width: 14px; height: 14px; color: #378c91; animation: agent-spin .9s linear infinite; }
.knowledge-chat-composer { min-width: 0; padding: 9px 11px 10px; background: #fff; border-top: 1px solid var(--soft-line); }
.knowledge-chat-composer textarea { width: 100%; min-height: 50px; max-height: 118px; resize: vertical; padding: 8px 10px; color: #2d484e; background: #fbfcfc; border: 1px solid #d5e0de; border-radius: 7px; outline: none; font: inherit; font-size: 12px; line-height: 1.5; }
.knowledge-chat-composer textarea:focus { background: #fff; border-color: #77aeb1; box-shadow: 0 0 0 2px rgba(52,144,149,.1); }
.knowledge-chat-composer > div { min-width: 0; min-height: 30px; display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.knowledge-chat-composer > div > span { min-width: 0; flex: 1; display: flex; align-items: center; gap: 5px; color: #829195; font-size: 11px; }
.knowledge-chat-composer > div > span svg { width: 11px; height: 11px; flex: 0 0 auto; color: #4f9397; }
.knowledge-chat-composer :is(.run-button, .outline-button) { min-height: 29px; padding: 0 9px; font-size: 9px; }
.knowledge-chat-composer :is(.run-button, .outline-button) svg { width: 12px; height: 12px; }
.knowledge-chat-unavailable strong { color: #405a60; font-size: 13px; }
.knowledge-chat-unavailable span { max-width: 390px; line-height: 1.55; }
.knowledge-chat-unavailable .outline-button { margin-top: 3px; }
.knowledge-files-panel { min-width: 0; min-height: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.knowledge-files-toolbar { min-width: 0; display: grid; grid-template-columns: minmax(160px, 240px) minmax(150px, 200px) minmax(0, 1fr); gap: 8px; align-items: end; }
.knowledge-files-toolbar > label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #607277; font-size: 10px; font-weight: 800; }
.knowledge-files-toolbar select { width: 100%; min-width: 0; height: 34px; padding: 0 10px; color: var(--ink); background: #fbfdfc; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 11px; }
.knowledge-files-toolbar select:focus { border-color: #2b969b; box-shadow: 0 0 0 3px rgba(43,150,155,.11); }
.knowledge-files-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.knowledge-files-actions .outline-button, .knowledge-file-preview header .outline-button { min-height: 34px; padding: 0 10px; font-size: 10px; }
.knowledge-files-actions svg, .knowledge-file-preview header .outline-button svg { width: 13px; height: 13px; }
.knowledge-project-summary { min-width: 0; min-height: 30px; display: flex; align-items: center; gap: 8px; padding: 5px 9px; color: #718287; background: #f8faf9; border: 1px solid var(--soft-line); border-radius: 6px; font-size: 9px; }
.knowledge-project-summary strong { flex: 0 0 auto; color: #34545a; font-size: 11px; }
.knowledge-project-summary span { min-width: 0; overflow: hidden; font-family: Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-project-summary em { margin-left: auto; color: #8a611a; font-style: normal; font-weight: 800; }
.knowledge-files-workspace { min-width: 0; min-height: 300px; flex: 1; display: grid; grid-template-columns: minmax(210px, 30%) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--soft-line); border-radius: 7px; }
.knowledge-file-tree { min-width: 0; min-height: 0; overflow: auto; padding: 6px; background: #f8faf9; border-right: 1px solid var(--soft-line); }
.knowledge-file-tree button { width: 100%; min-width: 0; min-height: 29px; display: flex; align-items: center; gap: 6px; padding: 0 7px 0 calc(7px + var(--knowledge-indent, 0px)); color: #52696e; background: transparent; border: 0; border-radius: 5px; cursor: pointer; font-size: 12px; text-align: left; }
.knowledge-file-tree button:hover, .knowledge-file-tree button.active { color: #16464c; background: #e6f2f1; }
.knowledge-file-tree button.active { box-shadow: inset 3px 0 0 #238b91; }
.knowledge-file-tree button svg { width: 13px; height: 13px; flex: 0 0 auto; color: #4b888d; }
.knowledge-file-tree button svg:first-child:nth-last-child(3) { width: 11px; height: 11px; color: #839397; }
.knowledge-file-tree button span { min-width: 0; overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-file-tree button small { min-width: 17px; color: #89979a; font-size: 11px; text-align: right; }
.knowledge-tree-empty { min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #7a8c90; font-size: 10px; }
.knowledge-tree-empty svg { width: 20px; height: 20px; }
.knowledge-tree-empty [data-lucide="loader-circle"] { animation: agent-spin .9s linear infinite; }
.knowledge-file-preview { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.knowledge-file-preview > header { min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 7px 9px 7px 12px; background: #fbfcfc; border-bottom: 1px solid var(--soft-line); }
.knowledge-file-preview-title { min-width: 0; flex: 1; }
.knowledge-file-preview-title strong, .knowledge-file-preview-title > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-file-preview-title strong { color: #2b464c; font-size: 12px; }
.knowledge-file-preview-title > span { margin-top: 3px; color: #869498; font-family: Consolas, monospace; font-size: 11px; }
.knowledge-file-preview-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.knowledge-original-source-empty { display: inline-flex; align-items: center; gap: 5px; color: #8b9799; font-size: 9px; white-space: nowrap; }
.knowledge-original-source-empty svg { width: 11px; height: 11px; }
.knowledge-file-preview-body { min-width: 0; min-height: 0; flex: 1; overflow: auto; }
.knowledge-markdown-preview { width: min(800px, 100%); margin: 0 auto; padding: 22px 26px 40px; color: #334b51; font-size: 11px; line-height: 1.72; }
.knowledge-markdown-preview :is(h1, h2, h3, h4) { margin: 1.35em 0 .55em; color: #203a40; line-height: 1.3; }
.knowledge-markdown-preview h1 { margin-top: 0; font-size: 22px; }
.knowledge-markdown-preview h2 { padding-bottom: 6px; border-bottom: 1px solid var(--soft-line); font-size: 17px; }
.knowledge-markdown-preview h3 { font-size: 14px; }
.knowledge-markdown-preview h4 { font-size: 12px; }
.knowledge-markdown-preview p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.knowledge-markdown-gap { height: 9px; }
.knowledge-markdown-list { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 5px; }
.knowledge-markdown-list > span { color: #2a7b81; font-weight: 900; }
.knowledge-markdown-preview blockquote { margin: 8px 0; padding: 7px 10px; color: #60777c; background: #f4f8f7; border-left: 3px solid #65aeb1; }
/* 与 .knowledge-note-preview pre 保持一致：代码块按宽度自动折行。
   pre 默认不折行（还配了 overflow:auto），正文里的长段落会显示成「一行、能一直往右拉」。 */
.knowledge-markdown-preview pre { overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0; padding: 11px; color: #d9e6e8; background: #24363b; border-radius: 7px; font: 10px/1.6 Consolas, monospace; }
.knowledge-markdown-preview hr { height: 1px; margin: 13px 0; background: var(--soft-line); border: 0; }
.knowledge-inline-media { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 12px 0 16px; }
.knowledge-inline-media > button { position: relative; min-width: 0; min-height: 180px; aspect-ratio: 16 / 10; display: block; overflow: hidden; padding: 0; background: #eef3f2; border: 1px solid #d8e3e1; border-radius: 7px; cursor: zoom-in; }
.knowledge-inline-media > button:hover { border-color: #8dbfbd; box-shadow: 0 4px 14px rgba(35,75,79,.12); }
.knowledge-inline-media img { width: 100%; height: 100%; display: block; object-fit: contain; background: #f5f8f7; }
.knowledge-inline-media span { position: absolute; right: 7px; bottom: 7px; max-width: calc(100% - 14px); display: inline-flex; align-items: center; gap: 5px; overflow: hidden; padding: 5px 7px; color: #fff; background: rgba(28,48,53,.78); border-radius: 5px; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-inline-media span svg { width: 11px; height: 11px; flex: 0 0 auto; }
.knowledge-inline-media.compact { grid-template-columns: minmax(0, 1fr); margin: 0 0 9px; }
.knowledge-inline-media.compact > button { min-height: 118px; aspect-ratio: 4 / 3; }
.knowledge-search-form { min-width: 0; display: grid; grid-template-columns: minmax(140px, 210px) auto minmax(180px, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 11px; }
.knowledge-search-form > input, .knowledge-project-select select, .knowledge-form-grid :is(input, select) { width: 100%; min-width: 0; height: 34px; padding: 0 10px; color: var(--ink); background: #fbfdfc; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 11px; }
.knowledge-search-form > input:focus, .knowledge-project-select select:focus, .knowledge-form-grid :is(input, select):focus, .knowledge-textarea-label textarea:focus { border-color: #2b969b; box-shadow: 0 0 0 3px rgba(43,150,155,.11); }
.knowledge-project-select, .knowledge-form-grid label, .knowledge-textarea-label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #607277; font-size: 10px; font-weight: 800; }
.knowledge-search-mode { height: 34px; display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: #edf3f2; border: 1px solid #dce6e4; border-radius: 6px; }
.knowledge-search-mode button { height: 26px; min-width: 42px; padding: 0 8px; color: #6b7d81; background: transparent; border: 0; border-radius: 4px; cursor: pointer; font-size: 9px; font-weight: 800; }
.knowledge-search-mode button:hover, .knowledge-search-mode button.active { color: #245d63; background: #fff; box-shadow: 0 1px 3px rgba(37,58,63,.1); }
.knowledge-search-query { min-width: 0; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; color: #74878a; background: #fbfdfc; border: 1px solid var(--line); border-radius: 6px; }
.knowledge-search-query:focus-within { border-color: #2b969b; box-shadow: 0 0 0 3px rgba(43,150,155,.11); }
.knowledge-search-query svg { width: 13px; height: 13px; flex: 0 0 auto; }
.knowledge-search-query input { width: 100%; min-width: 0; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 11px; }
.knowledge-search-form .run-button { height: 34px; min-width: 82px; justify-content: center; }
.knowledge-search-results { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.knowledge-search-section { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--soft-line); border-radius: 8px; }
.knowledge-search-section > header { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; background: #f7faf9; border-bottom: 1px solid var(--soft-line); }
.knowledge-search-section > header > div { display: flex; align-items: center; gap: 6px; color: #34595e; }
.knowledge-search-section > header svg { width: 13px; height: 13px; }
.knowledge-search-section > header strong { font-size: 10px; }
.knowledge-search-section > header small { color: #718488; font-size: 8px; }
.knowledge-search-section .knowledge-result-list { padding: 7px; }
.knowledge-search-section-empty { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #849497; font-size: 9px; }
.knowledge-search-section-empty svg { width: 18px; height: 18px; color: #6b9b9e; }
.knowledge-search-warning { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; color: #925052; background: #fff5f4; border: 1px solid #efd5d2; border-radius: 7px; font-size: 9px; line-height: 1.45; }

/* ── 模型 → 平台顺序（基础设置 → 模型配置）2026-09-18 ────────────────────
      每个模型一张卡片，卡片里每行 = 一个平台 + 上移/下移/删除；顺序即优先级。
      画布 / 应用中心 / Agent 生图共用这份顺序，见 services/image_model_routes.py
      布局：**四列卡片**，模型多了自动换行向下补充。 */
[data-image-model-routes-body] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.image-route-card { margin-top: 0; }
.image-route-card .settings-form-head { margin-bottom: 8px; }
.image-route-card .settings-form-head h3 { font-size: 12px; overflow-wrap: anywhere; }
.image-route-platforms { display: flex; flex-direction: column; gap: 6px; }

/* 一键 Wiki 配置 + 图片打标配置（2026-10-12 起两块共用）：**一行四列**——
   四个模型（Chat / Ingest / 向量嵌入 / 图片描述）并排一行；图片打标那两项占前两列。
   这样区块高度只有原来（2 列 × 2 行）的约一半。窄屏回落：≤1279px 两列、≤767px 一列。
   （更早曾要求"四列、只占左两列"，当时因为多一个 Ollama 地址输入框而回退；那个输入框已移除。） */
.settings-form[data-wiki-engine-config] > .settings-storage-columns,
.settings-form[data-image-archive-config] > .settings-storage-columns {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
/* 区块折叠（2026-09-21）：**点击标题栏**收起/展开（不再用右侧箭头按钮）。
   收起时只保留标题栏；默认第一个区块展开、其余折叠（见 models.js 的 setupCollapsibleSections）。 */
.settings-form > .settings-form-head.is-collapsible { cursor: pointer; user-select: none; }
.settings-form > .settings-form-head.is-collapsible:hover h3 { color: var(--cyan); }
.settings-form > .settings-form-head.is-collapsible:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.settings-form.is-collapsed > *:not(.settings-form-head) { display: none !important; }
.settings-form.is-collapsed > .settings-form-head { padding-bottom: 0; border-bottom: 0; }
.settings-form.is-collapsed { padding-bottom: 8px; }
/* 标题字号：统一由前面那条「模型配置页字号放大」的规则控制（15px）——
   这里不要再写 h3 字号，否则会因"后定义者胜"把它覆盖回 14px。 */
.settings-form[data-wiki-engine-config] > .settings-storage-columns > .settings-storage-column > .settings-form,
.settings-form[data-image-archive-config] > .settings-storage-columns > .settings-storage-column > .settings-form { gap: 8px; }
@media (max-width: 1279px) {
  .settings-form[data-wiki-engine-config] > .settings-storage-columns,
  .settings-form[data-image-archive-config] > .settings-storage-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .settings-form[data-wiki-engine-config] > .settings-storage-columns,
  .settings-form[data-image-archive-config] > .settings-storage-columns { grid-template-columns: minmax(0, 1fr); }
}
.image-route-platform-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 22px 22px 22px;
  align-items: center;
  gap: 4px;
}
.image-route-order {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}
.image-route-platform-row select { width: 100%; min-width: 0; font-size: 11px; }
.image-route-platform-row .icon-button { width: 22px; height: 22px; }
.image-route-platform-row .icon-button svg { width: 12px; height: 12px; }
.image-route-platform-row .icon-button:disabled { opacity: .35; cursor: not-allowed; }
.image-route-card .settings-form-actions { margin-top: 8px; }
.image-route-card .settings-form-actions .outline-button { height: 26px; font-size: 11px; }
/* 窄屏降级：保证卡片不挤成一团 */
@media (max-width: 1500px) {
  [data-image-model-routes-body] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
  [data-image-model-routes-body] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  [data-image-model-routes-body] { grid-template-columns: 1fr; }
}
.knowledge-search-warning svg { width: 13px; height: 13px; flex: 0 0 auto; }
.knowledge-image-result-grid { min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 7px; padding: 7px; }
.knowledge-image-result { min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) 27px; gap: 7px; align-items: center; padding: 5px; background: #fbfcfc; border: 1px solid #e0e8e6; border-radius: 6px; }
.knowledge-image-result:hover { background: #f5faf9; border-color: #bcd8d6; }
.knowledge-image-result-preview { width: 76px; height: 68px; display: grid; place-items: center; overflow: hidden; color: #7e9295; background: #eef3f2; border-radius: 5px; }
.knowledge-image-result-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.knowledge-image-result-preview svg { width: 18px; height: 18px; }
.knowledge-image-result > div { min-width: 0; }
.knowledge-image-result strong, .knowledge-image-result small, .knowledge-image-result span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-image-result strong { color: #304a4f; font-size: 9px; }
.knowledge-image-result small { margin-top: 4px; color: #788a8e; font-size: 8px; }
.knowledge-image-result span { margin-top: 4px; color: #548084; font-size: 8px; }
.knowledge-image-result > .icon-button { width: 27px; height: 27px; color: #5c7a7e; background: #fff; border: 1px solid #dce5e3; border-radius: 5px; }
.knowledge-image-result > .icon-button svg { width: 11px; height: 11px; }
.knowledge-result-list, .knowledge-review-list { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.knowledge-result-row { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 9px 10px; background: #fbfcfc; border: 1px solid var(--soft-line); border-radius: 7px; }
.knowledge-result-row.is-openable { cursor: pointer; }
.knowledge-result-row.is-openable:hover { background: #f5faf9; border-color: #bcd8d6; }
.knowledge-result-index { width: 24px; height: 24px; display: grid; place-items: center; color: #356c71; background: #e6f0ef; border-radius: 5px; font-size: 10px; font-weight: 900; }
.knowledge-result-body { min-width: 0; }
.knowledge-result-body strong, .knowledge-result-body span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-result-body strong { color: #263b41; font-size: 12px; }
.knowledge-result-body span { margin-top: 3px; color: #75868a; font-family: Consolas, monospace; font-size: 9px; }
.knowledge-result-body p { margin: 6px 0 0; color: #52676c; font-size: 10px; line-height: 1.55; }
.knowledge-result-score { min-width: 42px; padding: 4px 6px; color: #72551f; background: #fff6de; border: 1px solid #ead9a9; border-radius: 5px; font-size: 9px; font-weight: 900; text-align: center; }
.knowledge-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #7b8d90; font-size: 11px; text-align: center; }
.knowledge-empty svg { width: 24px; height: 24px; color: #6a999d; }
.knowledge-empty [data-lucide="loader-circle"] { animation: agent-spin .9s linear infinite; }
.knowledge-preview-empty { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.knowledge-preview-empty strong { color: #31474d; font-size: 14px; }
.knowledge-capture-form { display: flex; flex-direction: column; gap: 10px; }
.knowledge-capture-destination { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 11px; background: #f4f8f7; border: 1px solid #cfddda; border-radius: 7px; }
.knowledge-capture-destination > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: #286f74; background: #e3f1ef; border-radius: 6px; }
.knowledge-capture-destination > span svg { width: 15px; height: 15px; }
.knowledge-capture-destination > div { min-width: 0; flex: 1; }
.knowledge-capture-destination strong, .knowledge-capture-destination small { display: block; }
.knowledge-capture-destination strong { color: #2f484d; font-size: 11px; }
.knowledge-capture-destination small { margin-top: 3px; overflow: hidden; color: #718185; font-family: Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-capture-destination em { flex: 0 0 auto; padding: 4px 7px; border-radius: 5px; font-size: 9px; font-style: normal; font-weight: 900; }
.knowledge-capture-destination em.ready { color: #246852; background: #def2e8; }
.knowledge-capture-destination em.warning { color: #7a5b22; background: #fff1cd; }
.knowledge-capture-dropzone { min-height: 138px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 18px; color: #627478; background: #fbfcfc; border: 1px dashed #aebfbd; border-radius: 7px; transition: border-color .15s ease, background .15s ease; }
.knowledge-capture-dropzone.dragging { background: #eef8f6; border-color: #2c8c91; }
.knowledge-capture-dropzone > svg { width: 28px; height: 28px; color: #4b898e; }
.knowledge-capture-dropzone > div { min-width: 0; }
.knowledge-capture-dropzone strong, .knowledge-capture-dropzone span { display: block; }
.knowledge-capture-dropzone strong { color: #334e53; font-size: 12px; }
.knowledge-capture-dropzone > div > span { margin-top: 5px; font-size: 10px; line-height: 1.5; }
.knowledge-capture-pickers { display: flex; align-items: center; gap: 7px; }
.knowledge-capture-files { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f8faf9; border: 1px solid var(--soft-line); border-radius: 6px; }
.knowledge-capture-files > div { min-width: 0; flex: 1; }
.knowledge-capture-files strong, .knowledge-capture-files span { display: block; }
.knowledge-capture-files strong { color: #3c555a; font-size: 10px; }
.knowledge-capture-files span { margin-top: 3px; overflow: hidden; color: #77878a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-capture-files .icon-button { flex: 0 0 auto; }
.knowledge-capture-title label { display: flex; flex-direction: column; gap: 5px; color: #607277; font-size: 10px; font-weight: 800; }
.knowledge-capture-title input { width: 100%; height: 34px; padding: 0 10px; color: var(--ink); background: #fbfdfc; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 11px; }
.knowledge-capture-title input:focus { border-color: #2b969b; box-shadow: 0 0 0 3px rgba(43,150,155,.11); }
.knowledge-capture-modes { display: grid; grid-template-columns: repeat(6, minmax(88px, 1fr)); gap: 4px; margin-bottom: 10px; padding: 3px; background: #eef3f2; border: 1px solid #d7e1df; border-radius: 7px; }
.knowledge-capture-modes button { min-width: 0; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; color: #65777b; background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 800; }
.knowledge-capture-modes button:hover { color: #315c61; background: rgba(255,255,255,.62); }
.knowledge-capture-modes button.active { color: #205f65; background: #fff; border-color: #c6d8d5; box-shadow: 0 1px 2px rgba(34,65,69,.08); }
.knowledge-capture-modes svg { width: 14px; height: 14px; flex: 0 0 auto; }
.knowledge-scope-note { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; color: #46676c; background: #f1f8f7; border: 1px solid #cce2df; border-radius: 7px; }
.knowledge-scope-note > svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: #297e84; }
.knowledge-scope-note strong, .knowledge-scope-note span { display: block; }
.knowledge-scope-note strong { color: #295258; font-size: 11px; }
.knowledge-scope-note span { margin-top: 3px; font-size: 10px; line-height: 1.55; }
.knowledge-capture-hint { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; color: #795d28; background: #fff9eb; border: 1px solid #ead9ae; border-radius: 7px; font-size: 10px; line-height: 1.55; }
.knowledge-capture-hint svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.knowledge-form-grid { display: grid; grid-template-columns: 150px 180px minmax(180px, 1fr); gap: 8px; }
.knowledge-capture-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 8px; }
.knowledge-capture-meta-grid.standard { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.knowledge-capture-meta-grid.source { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.knowledge-capture-meta-grid label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #607277; font-size: 10px; font-weight: 800; }
.knowledge-capture-meta-grid :is(input, select) { width: 100%; min-width: 0; height: 34px; padding: 0 10px; color: var(--ink); background: #fbfdfc; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 11px; }
.knowledge-capture-meta-grid :is(input, select):focus { border-color: #2b969b; box-shadow: 0 0 0 3px rgba(43,150,155,.11); }
.knowledge-textarea-label textarea { width: 100%; min-height: 180px; padding: 10px; resize: vertical; color: var(--ink); background: #fbfdfc; border: 1px solid var(--line); border-radius: 6px; outline: none; font: inherit; font-size: 11px; line-height: 1.65; }
.knowledge-capture-foot { display: flex; align-items: center; gap: 10px; }
.knowledge-capture-foot > span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: #64777b; font-size: 10px; line-height: 1.45; }
.knowledge-capture-foot > span svg { width: 14px; height: 14px; flex: 0 0 auto; color: #8a6b2e; }
.knowledge-file-picker { min-height: 31px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: #49666b; background: #f5f8f8; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 800; }
.knowledge-file-picker svg { width: 13px; height: 13px; }
.knowledge-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.knowledge-rescan-check { display: inline-flex; align-items: center; gap: 6px; color: #617478; font-size: 10px; font-weight: 800; }
.knowledge-rescan-check input { width: 14px; height: 14px; }
.knowledge-capture-foot .run-button { min-height: 32px; margin-left: auto; }
.knowledge-review-row { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; background: #fbfcfc; border: 1px solid var(--soft-line); border-radius: 7px; }
.knowledge-review-body { min-width: 0; }
.knowledge-review-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #8a5b24; background: #fff2dc; border-radius: 6px; }
.knowledge-review-icon svg { width: 14px; height: 14px; }
.knowledge-review-row strong { color: #2b4046; font-size: 12px; }
.knowledge-review-row p { margin: 5px 0; color: #586d72; font-size: 10px; line-height: 1.5; }
.knowledge-review-row span { color: #879598; font-size: 9px; }
.knowledge-review-actions { display: flex; align-items: center; gap: 6px; }
.knowledge-review-actions .outline-button { min-height: 29px; padding: 0 8px; font-size: 9px; }
.knowledge-review-actions .outline-button svg { width: 12px; height: 12px; }
.knowledge-graph-workspace { min-width: 0; min-height: 520px; height: calc(100vh - 210px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--soft-line); border-radius: 7px; background: #fff; }
.knowledge-graph-toolbar { min-width: 0; min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #f8faf9; border-bottom: 1px solid var(--soft-line); }
.knowledge-graph-summary { min-width: max-content; display: flex; align-items: center; gap: 9px; color: #708287; font-size: 9px; }
.knowledge-graph-summary span { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.knowledge-graph-summary strong { color: #29464c; font-size: 12px; }
.knowledge-graph-type-filter { min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; padding: 2px; background: #eef3f2; border-radius: 6px; scrollbar-width: none; }
.knowledge-graph-type-filter::-webkit-scrollbar { display: none; }
.knowledge-graph-type-filter button { min-width: max-content; height: 27px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; color: #60757a; background: transparent; border: 0; border-radius: 5px; cursor: pointer; font-size: 9px; font-weight: 800; }
.knowledge-graph-type-filter button:hover, .knowledge-graph-type-filter button.active { color: #29464c; background: #fff; box-shadow: 0 1px 2px rgba(37,58,63,.08); }
.knowledge-graph-type-filter button > span { width: 7px; height: 7px; flex: 0 0 7px; background: var(--graph-node-color); border-radius: 50%; }
.knowledge-graph-type-filter button small { color: #87979a; font-size: 8px; }
.knowledge-graph-search { width: min(210px, 18vw); min-width: 145px; height: 30px; display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 8px; background: #fff; border: 1px solid #dbe4e2; border-radius: 6px; }
.knowledge-graph-search:focus-within { border-color: #6caaad; box-shadow: 0 0 0 2px rgba(38,137,143,.1); }
.knowledge-graph-search svg { width: 12px; height: 12px; flex: 0 0 auto; color: #728a8e; }
.knowledge-graph-search input { width: 100%; min-width: 0; padding: 0; color: #314c52; background: transparent; border: 0; outline: 0; font: inherit; font-size: 9px; }
.knowledge-graph-tools { display: flex; align-items: center; gap: 3px; }
.knowledge-graph-tools .icon-button { width: 29px; height: 29px; flex: 0 0 29px; color: #60777c; background: #fff; border: 1px solid #dbe4e2; border-radius: 6px; }
.knowledge-graph-tools .icon-button:hover { color: #1e7177; border-color: #a9cdca; background: #eff8f7; }
.knowledge-graph-tools .icon-button svg { width: 12px; height: 12px; }
.knowledge-graph-layout { min-width: 0; min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); overflow: hidden; }
.knowledge-graph-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #fbfcfc; }
.knowledge-graph-canvas { position: absolute; inset: 0; min-width: 0; min-height: 0; background-color: #fbfcfc; background-image: linear-gradient(#edf2f1 1px, transparent 1px), linear-gradient(90deg, #edf2f1 1px, transparent 1px); background-size: 24px 24px; }
.knowledge-graph-legend { position: absolute; left: 9px; bottom: 9px; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 6px 8px; color: #687d81; background: rgba(255,255,255,.92); border: 1px solid #dfe7e5; border-radius: 6px; box-shadow: 0 3px 10px rgba(37,58,63,.08); pointer-events: none; font-size: 8px; }
.knowledge-graph-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.knowledge-graph-legend i { width: 7px; height: 7px; background: var(--graph-node-color); border-radius: 50%; }
.knowledge-graph-inspector { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; background: #fff; border-left: 1px solid var(--soft-line); }
.knowledge-graph-inspector-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 20px; color: #819195; text-align: center; }
.knowledge-graph-inspector-empty svg { width: 22px; height: 22px; color: #568f93; }
.knowledge-graph-inspector-empty strong { color: #3d585e; font-size: 12px; }
.knowledge-graph-inspector-empty span { font-size: 9px; }
.knowledge-graph-inspector-head { min-width: 0; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 9px; align-items: start; padding: 12px 12px 8px; }
.knowledge-graph-node-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--graph-node-color); border-radius: 6px; }
.knowledge-graph-node-icon svg { width: 14px; height: 14px; }
.knowledge-graph-inspector-head > div:last-child { min-width: 0; }
.knowledge-graph-inspector-head span, .knowledge-graph-inspector-head strong, .knowledge-graph-inspector-head small { display: block; overflow: hidden; text-overflow: ellipsis; }
.knowledge-graph-inspector-head span { color: #7b8d91; font-size: 8px; font-weight: 900; }
.knowledge-graph-inspector-head strong { margin-top: 2px; color: #263f45; font-size: 12px; line-height: 1.35; }
.knowledge-graph-inspector-head small { margin-top: 4px; color: #879598; font-family: Consolas, monospace; font-size: 8px; white-space: nowrap; }
.knowledge-graph-inspector-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 12px 8px; }
.knowledge-graph-inspector-actions .outline-button { min-width: 0; min-height: 29px; justify-content: center; padding: 0 7px; font-size: 9px; }
.knowledge-graph-inspector-actions .outline-button svg { width: 11px; height: 11px; }
.knowledge-graph-node-stats { display: flex; align-items: center; gap: 12px; padding: 7px 12px; color: #73868a; background: #f8faf9; border-block: 1px solid var(--soft-line); font-size: 8px; }
.knowledge-graph-node-stats strong { color: #344f55; font-size: 10px; }
.knowledge-graph-neighbors { min-width: 0; padding: 9px 9px 6px; border-bottom: 1px solid var(--soft-line); }
.knowledge-graph-neighbors > header { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 5px; color: #536b70; }
.knowledge-graph-neighbors > header strong { font-size: 9px; }
.knowledge-graph-neighbors > header small { color: #8b999c; font-size: 8px; }
.knowledge-graph-neighbors > div { max-height: 152px; overflow: auto; }
.knowledge-graph-neighbors button { width: 100%; min-width: 0; min-height: 27px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 0 5px; color: #486166; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
.knowledge-graph-neighbors button:hover { background: #eef6f5; }
.knowledge-graph-neighbors button > span { width: 7px; height: 7px; background: var(--graph-node-color); border-radius: 50%; }
.knowledge-graph-neighbors button strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-graph-neighbors button small { color: #87979a; font-size: 8px; }
.knowledge-graph-note-preview { min-width: 0; min-height: 150px; flex: 1; overflow: auto; }
.knowledge-graph-preview-empty { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #89979a; font-size: 9px; }
.knowledge-graph-preview-empty svg { width: 16px; height: 16px; color: #63989b; }
.knowledge-graph-preview-empty [data-lucide="loader-circle"] { animation: agent-spin .9s linear infinite; }
.knowledge-graph-preview-error { display: flex; align-items: flex-start; gap: 6px; margin: 0 10px 8px; padding: 7px 8px; color: #984c51; background: #fff4f4; border: 1px solid #f0d2d3; border-radius: 6px; font-size: 8px; line-height: 1.45; }
.knowledge-graph-preview-error svg { width: 12px; height: 12px; flex: 0 0 auto; }
.knowledge-graph-markdown-preview { width: 100%; padding: 14px 15px 26px; font-size: 9px; line-height: 1.6; }
.knowledge-graph-markdown-preview h1 { font-size: 16px; }
.knowledge-graph-markdown-preview h2 { font-size: 13px; }
.knowledge-graph-markdown-preview h3 { font-size: 11px; }
.knowledge-component-panel { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.knowledge-component-panel > header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--soft-line); }
.knowledge-component-panel > header > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #276f75; background: #e7f2f1; border-radius: 7px; }
.knowledge-component-panel > header > div { min-width: 0; flex: 1; }
.knowledge-component-panel > header .run-button { min-height: 34px; padding: 0 11px; font-size: 10px; }
.knowledge-component-panel > header svg { width: 17px; height: 17px; }
.knowledge-component-panel > header strong, .knowledge-component-panel > header small { display: block; }
.knowledge-component-panel > header strong { color: #263d43; font-size: 13px; }
.knowledge-component-panel > header small { margin-top: 3px; color: #7b8b8e; font-size: 10px; }
.knowledge-component-layout { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.knowledge-component-column { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.knowledge-integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.knowledge-integration-grid section { min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 11px; background: #f8faf9; border: 1px solid var(--soft-line); border-radius: 7px; }
.knowledge-integration-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: #7b6431; background: #fff4dc; border-radius: 6px; }
.knowledge-integration-icon.ready { color: #247078; background: #e6f2f1; }
.knowledge-integration-icon svg { width: 15px; height: 15px; }
.knowledge-integration-grid strong { color: #2d484e; font-size: 11px; }
.knowledge-integration-grid p { margin: 5px 0; color: #596f74; font-size: 10px; line-height: 1.55; }
.knowledge-integration-grid small { color: #809094; font-size: 9px; line-height: 1.45; }
.knowledge-integration-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; background: #fff; border: 1px solid var(--soft-line); border-radius: 7px; }
.knowledge-integration-status > div { min-width: 0; padding: 9px 10px; border-right: 1px solid var(--soft-line); }
.knowledge-integration-status > div:last-child { border-right: 0; }
.knowledge-integration-status span, .knowledge-integration-status strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-integration-status span { color: #7b8b8f; font-size: 9px; }
.knowledge-integration-status strong { margin-top: 4px; color: #304c52; font-size: 10px; }
.knowledge-integration-status strong.ready { color: #24754c; }
.knowledge-integration-status strong.warning { color: #96651d; }
.knowledge-model-routing { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #fbfcfc; border: 1px solid var(--soft-line); border-radius: 7px; }
.knowledge-model-routing > header { display: flex; align-items: center; gap: 9px; }
.knowledge-model-routing > header > span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: #286f75; background: #e6f2f1; border-radius: 6px; }
.knowledge-model-routing > header > span svg { width: 16px; height: 16px; }
.knowledge-model-routing > header > div:nth-child(2) { min-width: 0; flex: 1; }
.knowledge-model-routing > header strong, .knowledge-model-routing > header small { display: block; }
.knowledge-model-routing > header strong { color: #2d484e; font-size: 12px; }
.knowledge-model-routing > header small { margin-top: 3px; color: #73868a; font-size: 9px; line-height: 1.45; }
.knowledge-model-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.knowledge-model-actions :is(.outline-button, .run-button) { min-height: 32px; padding: 0 10px; font-size: 10px; }
.knowledge-model-actions svg { width: 13px; height: 13px; }
.knowledge-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.knowledge-model-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #dfe8e7; border-radius: 7px; }
.knowledge-model-card.ready { border-top: 2px solid #58a78c; }
.knowledge-model-card.warning { border-top: 2px solid #d09b4b; }
.knowledge-model-card.disabled { border-top: 2px solid #aab7b9; opacity: .78; }
.knowledge-model-card > header { display: flex; align-items: center; gap: 7px; padding: 9px 9px 5px; }
.knowledge-model-card > header > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; color: #2a797f; background: #edf6f5; border-radius: 5px; }
.knowledge-model-card > header > span svg { width: 13px; height: 13px; }
.knowledge-model-card > header > div { min-width: 0; flex: 1; }
.knowledge-model-card > header strong, .knowledge-model-card > header small { display: block; }
.knowledge-model-card > header strong { color: #304c52; font-size: 10px; }
.knowledge-model-card > header small { margin-top: 2px; color: #89979a; font-size: 8px; }
.knowledge-model-card > header em { padding: 3px 6px; color: #24754c; background: #e8f5ed; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 900; }
.knowledge-model-card.warning > header em { color: #97611e; background: #fff2dc; }
.knowledge-model-card.disabled > header em { color: #66797d; background: #edf1f1; }
.knowledge-model-name { overflow: hidden; margin: 1px 9px 0; color: #203e45; font-family: Consolas, monospace; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-model-service { display: flex; align-items: center; gap: 6px; margin: 6px 9px 0; color: #6d8185; font-size: 8px; font-weight: 800; }
.knowledge-model-service i { width: 3px; height: 3px; background: #acb9bb; border-radius: 99px; }
.knowledge-model-service span.ready { color: #2b8057; }
.knowledge-model-service span.warning { color: #a36320; }
.knowledge-model-card > code { display: block; overflow: hidden; margin: 6px 9px 0; color: #63787d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-model-card > p { display: grid; grid-template-columns: 53px minmax(0, 1fr); gap: 6px; margin: 7px 9px 9px; color: #718488; font-size: 8px; line-height: 1.45; }
.knowledge-model-card > p strong { color: #526b70; font-size: inherit; }
.knowledge-model-card > footer { min-height: 34px; display: flex; align-items: flex-start; gap: 6px; padding: 7px 9px; color: #536f74; background: #f1f7f6; border-top: 1px solid #e3ecea; font-size: 8px; line-height: 1.4; }
.knowledge-model-card > footer.warning { color: #85591c; background: #fff6e8; border-top-color: #f2dfbd; }
.knowledge-model-card > footer svg { width: 11px; height: 11px; flex: 0 0 auto; margin-top: 1px; }
.knowledge-model-channel { min-height: 47px; display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 7px; align-items: center; padding: 8px 10px; color: #48666c; background: #f0f6f5; border: 1px dashed #c5d8d6; border-radius: 6px; }
.knowledge-model-channel > div { min-width: 0; }
.knowledge-model-channel span, .knowledge-model-channel strong, .knowledge-model-channel small { display: block; }
.knowledge-model-channel span { color: #7d9093; font-size: 8px; }
.knowledge-model-channel strong { margin-top: 2px; color: #2c545a; font-size: 9px; }
.knowledge-model-channel small { margin-top: 2px; overflow: hidden; color: #6c8286; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-model-channel > svg { width: 14px; height: 14px; color: #33878c; }
.knowledge-model-routing > footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #74878b; font-size: 8px; }
.knowledge-model-routing > footer span { display: flex; align-items: center; gap: 4px; min-width: 0; }
.knowledge-model-routing > footer span.ready { color: #347a59; }
.knowledge-model-routing > footer span.warning { color: #97621e; }
.knowledge-model-routing > footer svg { width: 10px; height: 10px; flex: 0 0 auto; }
.knowledge-model-routing > footer code { overflow: hidden; max-width: 270px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-model-error, .knowledge-model-empty { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #8e5b1b; background: #fff6e8; border: 1px solid #efd7ad; border-radius: 6px; font-size: 9px; }
.knowledge-model-error svg, .knowledge-model-empty svg { width: 14px; height: 14px; flex: 0 0 auto; }
.knowledge-component-panel dl { margin: 0; }
.knowledge-component-panel dl > div { min-height: 38px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; border-bottom: 1px solid #edf1f0; }
.knowledge-component-panel dt { color: #738489; font-size: 10px; font-weight: 800; }
.knowledge-component-panel dd { min-width: 0; margin: 0; overflow: hidden; color: #344e54; font-family: Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-component-panel dd a { color: #277e85; text-decoration: none; }
.knowledge-component-panel dd a:hover { text-decoration: underline; }
.knowledge-mineru-connector { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #f8faf9; border: 1px solid var(--soft-line); border-radius: 7px; }
.knowledge-mineru-connector > header { display: flex; align-items: center; gap: 9px; }
.knowledge-mineru-connector > header > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: #286f75; background: #e6f2f1; border-radius: 6px; }
.knowledge-mineru-connector > header > span svg { width: 15px; height: 15px; }
.knowledge-mineru-connector > header > div { min-width: 0; flex: 1; }
.knowledge-mineru-connector > header strong, .knowledge-mineru-connector > header small { display: block; }
.knowledge-mineru-connector > header strong { color: #2d484e; font-size: 11px; }
.knowledge-mineru-connector > header small { overflow: hidden; margin-top: 3px; color: #7b8b8f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-mineru-connector > header em { flex: 0 0 auto; padding: 4px 7px; border-radius: 5px; font-size: 9px; font-style: normal; font-weight: 900; }
.knowledge-mineru-connector > header em.ready { color: #24754c; background: #e8f5ed; }
.knowledge-mineru-connector > header em.warning { color: #9a571e; background: #fff0e4; }
.knowledge-mineru-connector > header em.idle { color: #687b80; background: #edf1f1; }
.knowledge-mineru-connector form { display: grid; grid-template-columns: minmax(260px, 1.5fr) minmax(190px, 1fr); gap: 9px; }
.knowledge-mineru-mode { height: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; align-self: end; background: #edf1f1; border: 1px solid var(--line); border-radius: 6px; }
.knowledge-mineru-mode label { position: relative; min-width: 0; cursor: pointer; }
.knowledge-mineru-mode input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.knowledge-mineru-mode span { height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; color: #687b80; font-size: 10px; font-weight: 900; }
.knowledge-mineru-mode span svg { width: 13px; height: 13px; }
.knowledge-mineru-mode input:checked + span { color: #205f65; background: #fff; box-shadow: 0 0 0 1px #b9d5d4; }
.knowledge-mineru-mode input:focus-visible + span { outline: 2px solid rgba(35,139,145,.35); outline-offset: -2px; }
.knowledge-mineru-mode input:disabled + span { opacity: .55; cursor: not-allowed; }
.knowledge-mineru-auto { min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 6px 9px; color: #315c61; background: #edf6f4; border: 1px solid #c9ddda; border-radius: 6px; }
.knowledge-mineru-auto > svg { width: 15px; height: 15px; flex: 0 0 auto; color: #28777c; }
.knowledge-mineru-auto > div { min-width: 0; }
.knowledge-mineru-auto strong, .knowledge-mineru-auto span { display: block; }
.knowledge-mineru-auto strong { font-size: 10px; }
.knowledge-mineru-auto span { margin-top: 2px; color: #708185; font-size: 9px; line-height: 1.35; }
.knowledge-mineru-connector form > label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #607277; font-size: 10px; font-weight: 800; }
.knowledge-mineru-connector input[type="url"], .knowledge-mineru-connector input[type="password"] { width: 100%; min-width: 0; height: 34px; padding: 0 10px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; outline: none; font-family: Consolas, monospace; font-size: 10px; }
.knowledge-mineru-connector input[type="url"]:focus, .knowledge-mineru-connector input[type="password"]:focus { border-color: #2b969b; box-shadow: 0 0 0 3px rgba(43,150,155,.11); }
.knowledge-mineru-controls { grid-column: 1 / -1; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.knowledge-mineru-controls > div { display: flex; align-items: center; gap: 7px; }
.knowledge-mineru-controls :is(.outline-button, .run-button) { min-height: 32px; padding: 0 10px; font-size: 10px; }
.knowledge-mineru-controls :is(.outline-button, .run-button) svg { width: 13px; height: 13px; }
.knowledge-switch { position: relative; display: inline-grid; grid-template-columns: 34px auto; align-items: center; gap: 7px; color: #405c62; cursor: pointer; font-size: 10px; }
.knowledge-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.knowledge-switch > span { position: relative; width: 34px; height: 19px; background: #cbd6d8; border: 1px solid #bcc9cb; border-radius: 999px; transition: background .15s ease, border-color .15s ease; }
.knowledge-switch > span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; background: #fff; border-radius: 999px; box-shadow: 0 1px 4px rgba(30,48,54,.2); transition: left .15s ease; }
.knowledge-switch input:checked + span { background: #238b91; border-color: #238b91; }
.knowledge-switch input:checked + span::after { left: 17px; }
.knowledge-switch input:focus-visible + span { outline: 2px solid rgba(35,139,145,.35); outline-offset: 2px; }
.knowledge-switch input:disabled + span { opacity: .55; cursor: not-allowed; }
.knowledge-component-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.knowledge-component-actions .outline-button { min-height: 31px; padding: 0 10px; font-size: 10px; }
.knowledge-component-actions .outline-button svg { width: 13px; height: 13px; }

@media (max-width: 900px) {
  .knowledge-header-notice { max-width: min(420px, 42vw); }
  .knowledge-workbench { grid-template-columns: 1fr; }
  .knowledge-sidebar { border-right: 0; border-bottom: 1px solid var(--soft-line); }
  .knowledge-sidebar-runtime { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
  .knowledge-sidebar-project { min-width: 190px; max-width: 280px; margin: 0; }
  .knowledge-sidebar-status { min-width: 150px; flex: 1; }
  .knowledge-sidebar-runtime-actions { display: flex; flex: 0 0 auto; margin-top: 0; }
  .knowledge-sidebar-runtime-actions :is(.run-button, .outline-button) { min-width: 66px; }
  .knowledge-tabs { flex: 0 0 auto; flex-direction: row; overflow-x: auto; }
  .knowledge-tabs button { width: auto; min-width: 112px; }
  .knowledge-tabs button.active { box-shadow: inset 0 -3px 0 #238b91; }
  .knowledge-search-form { grid-template-columns: auto minmax(0, 1fr) auto; }
  .knowledge-project-select { grid-column: 1 / -1; }
  .knowledge-form-grid { grid-template-columns: 1fr; }
  .knowledge-capture-meta-grid, .knowledge-capture-meta-grid.standard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-files-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-files-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .knowledge-integration-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-integration-status > div:nth-child(2) { border-right: 0; }
  .knowledge-integration-status > div:nth-child(-n+2) { border-bottom: 1px solid var(--soft-line); }
  .knowledge-model-routing > header { align-items: flex-start; flex-wrap: wrap; }
  .knowledge-model-actions { width: 100%; justify-content: flex-end; }
  .knowledge-chat-panel { grid-template-columns: 190px minmax(0, 1fr); }
  .knowledge-graph-toolbar { flex-wrap: wrap; }
  .knowledge-graph-type-filter { order: 3; flex: 1 1 100%; }
  .knowledge-graph-search { margin-left: auto; }
}

@media (max-width: 1280px) {
  .knowledge-component-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .page-view-app-center .page-view-head { align-items: flex-start; flex-wrap: wrap; }
  .page-view-app-center .page-view-head-actions { width: 100%; flex-wrap: wrap; }
  .app-center-header-tabs { flex: 1 1 100%; width: 100%; grid-auto-columns: minmax(0, 1fr); }
  .page-view-knowledge .page-view-head { align-items: flex-start; }
  .page-view-knowledge .page-view-head-actions { flex-wrap: wrap; }
  .knowledge-header-notice { width: 100%; max-width: none; order: 2; }
  .knowledge-panel { padding: 9px; }
  .knowledge-sidebar-runtime { align-items: stretch; flex-direction: column; }
  .knowledge-sidebar-project { width: 100%; max-width: none; }
  .knowledge-sidebar-runtime-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-search-form { grid-template-columns: minmax(0, 1fr); }
  .knowledge-search-mode { width: 100%; }
  .knowledge-search-mode button { flex: 1; }
  .knowledge-search-form .run-button { width: 100%; }
  .knowledge-image-result-grid { grid-template-columns: minmax(0, 1fr); }
  .knowledge-capture-foot { align-items: stretch; flex-direction: column; }
  .knowledge-capture-destination { align-items: flex-start; flex-wrap: wrap; }
  .knowledge-capture-destination > div { flex-basis: calc(100% - 40px); }
  .knowledge-capture-destination em { margin-left: 40px; }
  .knowledge-capture-dropzone { grid-template-columns: 30px minmax(0, 1fr); padding: 14px 12px; }
  .knowledge-capture-pickers { grid-column: 1 / -1; align-items: stretch; flex-direction: column; }
  .knowledge-capture-pickers .knowledge-file-picker { justify-content: center; }
  .knowledge-capture-modes { grid-template-columns: repeat(6, minmax(86px, 1fr)); overflow-x: auto; }
  .knowledge-capture-meta-grid, .knowledge-capture-meta-grid.standard, .knowledge-capture-meta-grid.source { grid-template-columns: minmax(0, 1fr); }
  .knowledge-capture-foot .run-button { width: 100%; margin-left: 0; }
  .knowledge-files-toolbar { grid-template-columns: minmax(0, 1fr); }
  .knowledge-files-actions { grid-column: auto; align-items: stretch; flex-direction: column; }
  .knowledge-files-actions .outline-button { width: 100%; justify-content: center; }
  .knowledge-files-workspace { grid-template-columns: 1fr; }
  .knowledge-file-tree { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--soft-line); }
  .knowledge-file-preview { min-height: 300px; }
  .knowledge-file-preview > header { align-items: flex-start; flex-wrap: wrap; }
  .knowledge-file-preview-title { width: 100%; flex-basis: 100%; }
  .knowledge-file-preview-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .knowledge-graph-workspace { height: auto; min-height: 760px; }
  .knowledge-graph-summary { order: 1; }
  .knowledge-graph-search { width: 100%; order: 3; margin-left: 0; }
  .knowledge-graph-type-filter { order: 4; }
  .knowledge-graph-tools { order: 2; margin-left: auto; }
  .knowledge-graph-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: 420px minmax(340px, 1fr); }
  .knowledge-graph-inspector { border-top: 1px solid var(--soft-line); border-left: 0; }
  .knowledge-graph-legend { max-width: calc(100% - 18px); overflow: hidden; }
  .knowledge-review-row { grid-template-columns: 30px minmax(0, 1fr); }
  .knowledge-review-actions { grid-column: 2; flex-wrap: wrap; }
  .knowledge-integration-grid { grid-template-columns: 1fr; }
  .knowledge-model-grid { grid-template-columns: 1fr; }
  .knowledge-model-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-model-actions :is(.outline-button, .run-button) { justify-content: center; }
  .knowledge-model-channel { grid-template-columns: 1fr; }
  .knowledge-model-channel > svg { transform: rotate(90deg); }
  .knowledge-mineru-connector form { grid-template-columns: 1fr; }
  .knowledge-mineru-controls { grid-column: 1; }
  .knowledge-component-panel > header { align-items: flex-start; flex-wrap: wrap; }
  .knowledge-component-panel > header .run-button { width: 100%; justify-content: center; }
  .knowledge-result-row { grid-template-columns: 24px minmax(0, 1fr); }
  .knowledge-result-score { grid-column: 2; justify-self: start; }
  .knowledge-component-panel dl > div { grid-template-columns: 56px minmax(0, 1fr); }
  .knowledge-component-actions .outline-button { flex: 1 1 auto; }
  .knowledge-mineru-controls { align-items: flex-start; flex-direction: column; }
  .knowledge-mineru-controls > div { width: 100%; }
  .knowledge-mineru-controls :is(.outline-button, .run-button) { flex: 1; justify-content: center; }
  .knowledge-panel.knowledge-chat-host { padding: 0; }
  .knowledge-chat-panel { grid-template-columns: 1fr; grid-template-rows: 118px minmax(0, 1fr); }
  .knowledge-chat-sidebar { border-right: 0; border-bottom: 1px solid var(--soft-line); }
  .knowledge-chat-sidebar > header, .knowledge-chat-sidebar > label, .knowledge-chat-sidebar > footer { display: none; }
  .knowledge-chat-session-list { display: flex; gap: 4px; overflow-x: auto; padding: 6px; }
  .knowledge-chat-session { min-width: 180px; grid-template-columns: minmax(0, 1fr) 25px 25px; flex: 0 0 auto; }
  .knowledge-chat-main { grid-template-rows: 48px minmax(0, 1fr) auto; }
  .knowledge-chat-main > header { padding-left: 10px; }
  .knowledge-chat-messages { padding: 12px 10px 18px; }
  .knowledge-chat-message.user { width: 92%; }
}

/* ===== 网页图文采集（asset 采集分类） ===== */
.asset-capture-panel { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; }
.asset-capture-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asset-capture-bookmarklet { min-width: 0; display: flex; align-items: center; gap: 10px; }
.asset-capture-hint { min-width: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.asset-capture-action { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 850; text-decoration: none; }
.asset-capture-action:hover { color: var(--ink); border-color: var(--cyan); background: #f4fbfb; }
.asset-capture-action svg { width: 13px; height: 13px; color: var(--cyan); }
.asset-capture-action.primary { color: #ffffff; background: var(--cyan); border-color: var(--cyan); }
.asset-capture-action.primary:hover { color: #ffffff; background: #0f7c87; }
.asset-capture-action.primary svg { color: #ffffff; }
.asset-capture-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.asset-capture-list { display: flex; flex-direction: column; gap: 6px; }
.asset-capture-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: #ffffff; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.asset-capture-item:hover, .asset-capture-item:focus-visible { border-color: rgba(30,158,170,.42); background: #f4fbfb; }
.asset-capture-item-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: var(--cyan); background: #eaf6f5; border-radius: 7px; }
.asset-capture-item-icon svg { width: 16px; height: 16px; }
.asset-capture-item-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.asset-capture-item-main strong { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.asset-capture-item-meta { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.asset-capture-item-chevron { width: 14px; height: 14px; flex: 0 0 14px; color: var(--faint); }
.asset-capture-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 36px 12px; color: var(--muted); text-align: center; font-size: 10px; }
.asset-capture-empty > svg { width: 26px; height: 26px; color: var(--cyan); }
.asset-capture-empty strong { color: var(--ink); font-size: 12px; font-weight: 900; }
.asset-capture-empty span { max-width: 360px; font-size: 9px; line-height: 1.55; }
.asset-capture-empty .asset-capture-action { margin-top: 6px; }
.asset-capture-error { color: #b42318; }
.asset-capture-detail { display: flex; flex-direction: column; gap: 10px; }
.asset-capture-detail-title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 900; line-height: 1.45; }
.asset-capture-detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0; padding: 10px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 7px; }
.asset-capture-detail-meta div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.asset-capture-detail-meta dt { color: var(--faint); font-size: 8px; font-weight: 850; }
.asset-capture-detail-meta dd { margin: 0; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.asset-capture-detail-meta a { color: #0f6872; text-decoration: none; }
.asset-capture-text { margin: 0; padding: 12px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.asset-capture-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.asset-capture-image { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.asset-capture-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--line); border-radius: 7px; background: #f3f8f8; }
.asset-capture-image figcaption { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.asset-capture-image-missing { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; color: var(--muted); background: #f3f8f8; border: 1px solid var(--line); border-radius: 7px; }
.asset-capture-image-missing svg { width: 22px; height: 22px; }
.asset-capture-action.danger { color: #b42318; background: #fff7f7; border-color: #fecaca; }
.asset-capture-action.danger:hover { color: #b42318; background: #ffecec; border-color: #fca5a5; }
.asset-capture-action.danger svg { color: #b42318; }
/* 采集详情「预览」：沙箱 iframe 覆盖层，退出即恢复原状。 */
.asset-capture-preview { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 26px; background: rgba(9,14,16,.55); }
.asset-capture-preview > header { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fff; }
.asset-capture-preview > header strong { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.asset-capture-preview > header span { flex: 0 0 auto; color: var(--faint); font-size: 9px; font-weight: 700; }
.asset-capture-preview-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 1px solid var(--line); border-radius: 0 0 8px 8px; background: #fff; }
.asset-capture-delete { flex: 0 0 auto; }
.asset-capture-image-media { cursor: zoom-in; }
.asset-capture-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(10, 14, 20, .82); }
.asset-capture-lightbox-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; color: #ffffff; background: rgba(15, 23, 42, .5); border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; cursor: pointer; }
.asset-capture-lightbox-close:hover { background: rgba(15, 23, 42, .78); }
.asset-capture-lightbox-close svg { width: 18px; height: 18px; }
.asset-capture-lightbox-stage { max-width: 92vw; max-height: 84vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.asset-capture-lightbox-img { max-width: 92vw; max-height: 76vh; object-fit: contain; border-radius: 8px; background: #ffffff; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
.asset-capture-lightbox-caption { display: flex; align-items: center; gap: 12px; max-width: 92vw; color: #e6edf0; font-size: 12px; }
.asset-capture-lightbox-caption span:first-child { color: var(--cyan); font-weight: 850; }
.asset-capture-lightbox-caption span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-capture-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; color: #ffffff; background: rgba(15, 23, 42, .5); border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; cursor: pointer; }
.asset-capture-lightbox-nav:hover { background: rgba(15, 23, 42, .8); }
.asset-capture-lightbox-nav.prev { left: 16px; }
.asset-capture-lightbox-nav.next { right: 16px; }
.asset-capture-lightbox-nav svg { width: 20px; height: 20px; }
.asset-capture-image-check { display: flex; align-items: center; gap: 6px; padding: 4px 2px 0; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.asset-capture-image-check input { width: 13px; height: 13px; margin: 0; accent-color: var(--cyan); cursor: pointer; }
.asset-capture-image-check:hover { color: var(--ink); }

/* Image composition node: this is a scaled view of the exported canvas. */
.image-compose-editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.canvas-node[data-node-type="imageCompose"] .node-shell-body { overflow: hidden; }
.canvas-node[data-node-type="imageCompose"] .node-shell-body > .system-node-pills { flex: 0 0 auto; }
.canvas-node[data-node-type="imageCompose"] .image-compose-editor {
  flex: 1 1 auto;
  padding: 8px 10px 10px;
  overflow: hidden;
  content-visibility: visible !important;
  contain-intrinsic-size: none;
}
.image-compose-stage-frame { position: relative; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 80px; display: grid; place-items: center; overflow: hidden; background: #f4f8f8; border: 1px solid var(--line); border-radius: 7px; container-type: size; }
.image-compose-stage { position: relative; width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: var(--compose-ratio, 1); overflow: hidden; background: #000; border: 1px solid rgba(30,158,170,.42); border-radius: 3px; }
@supports (width: 1cqw) {
  .image-compose-stage { width: min(100cqw, calc(100cqh * var(--compose-ratio, 1))); height: min(100cqh, calc(100cqw / var(--compose-ratio, 1))); }
}
.image-compose-stage-item { position: absolute; display: block; min-width: 1px; min-height: 1px; overflow: hidden; user-select: none; pointer-events: none; }
.image-compose-stage-item img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.image-compose-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.image-compose-editor > .node-edit-grid .node-edit-field { flex-direction: row; align-items: center; gap: 6px; }
.image-compose-editor > .node-edit-grid .node-edit-field > span { flex: 0 0 58px; min-width: 0; line-height: 1.2; }
.image-compose-editor > .node-edit-grid .node-edit-field > input,
.image-compose-editor > .node-edit-grid .node-edit-field > select,
.image-compose-editor > .node-edit-grid .node-edit-field > textarea { flex: 1 1 auto; width: auto; }
.image-compose-editor > .node-edit-grid .node-edit-check { align-items: center; padding-bottom: 0; }
.image-compose-editor > .node-edit-grid .node-edit-check span { order: 0; }
.image-compose-editor > .node-edit-grid .node-edit-check input { order: 1; }
.canvas-node[data-node-type="imageCompose"] .node-shell-body > .image-compose-node-header { flex: 0 0 34px; min-height: 34px; height: 34px; box-sizing: border-box; gap: 7px; padding: 3px 10px; border-radius: 11px 11px 0 0; }
.canvas-node[data-node-type="imageCompose"] .image-compose-node-header > div { gap: 0; }
.canvas-node[data-node-type="imageCompose"] .image-compose-node-header .node-icon { width: 24px; height: 24px; }
.canvas-node[data-node-type="imageCompose"] .image-compose-node-header .node-icon svg { width: 13px; height: 13px; }
.canvas-node[data-node-type="imageCompose"] .image-compose-node-header strong { font-size: 11px; }
.canvas-node[data-node-type="imageCompose"] .image-compose-node-header small { display: none; }
.canvas-node[data-node-type="imageCompose"] .image-compose-node-header .node-delete-button { width: 24px; height: 24px; border-radius: 6px; }
.canvas-node[data-node-type="imageCompose"] .image-compose-node-header .node-delete-button svg { width: 12px; height: 12px; }
/* Knowledge notebook */
.knowledge-notebook{display:grid;grid-template-columns:210px minmax(260px,340px) minmax(360px,1fr);width:100%;height:100%;min-height:0;flex:1 1 auto;box-sizing:border-box;background:var(--surface,#fff);border:1px solid var(--line,#e5e7eb);border-radius:16px;overflow:hidden}
.knowledge-notebook-filters{padding:18px;background:var(--surface-muted,#f7f8f8);border-right:1px solid var(--line,#e5e7eb)}
.knowledge-notebook-brand{display:flex;gap:10px;align-items:center;margin-bottom:18px}.knowledge-notebook-brand svg{color:#218b91}.knowledge-notebook-brand strong{display:block}.knowledge-notebook-brand small{display:block;color:var(--muted,#718489);font-size:11px;margin-top:3px}
.knowledge-notebook-filters>input{width:100%;box-sizing:border-box;border:1px solid var(--line,#d8e0e0);border-radius:8px;padding:9px 10px;background:#fff;margin-bottom:12px;font-size:12px}.knowledge-notebook-filters>select{width:100%;box-sizing:border-box;border:1px solid var(--line,#d8e0e0);border-radius:8px;padding:7px 10px;background:#fff;margin-bottom:8px;color:var(--ink,#243437);font-size:12px}
.knowledge-notebook-filters nav{display:grid;gap:3px}.knowledge-notebook-filters nav button{display:flex;justify-content:space-between;border:0;background:transparent;border-radius:7px;padding:9px 10px;text-align:left;color:var(--ink,#243437);cursor:pointer;font-size:12px}.knowledge-notebook-filters nav button.active{background:#dcefee;color:#146b70;font-weight:600}.knowledge-notebook-filters nav button small{font-size:10px}.knowledge-notebook-hint{font-size:11px;color:var(--muted,#718489);line-height:1.5;margin-top:18px}
.knowledge-notebook-list{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line,#e5e7eb);background:#fff}.knowledge-notebook-list>header{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid var(--line,#e5e7eb)}.knowledge-notebook-list>header strong{display:block}.knowledge-notebook-list>header span{font-size:12px;color:var(--muted,#718489)}.knowledge-note-items{min-height:0;flex:1 1 auto;padding:8px;display:grid;align-content:start;gap:6px;overflow:auto}.knowledge-note-item{display:block;text-align:left;width:100%;border:1px solid transparent;background:transparent;border-radius:10px;padding:12px;cursor:pointer}.knowledge-note-item:hover{background:#f5f9f9}.knowledge-note-item.active{background:#e8f5f4;border-color:#b5dfdc}.knowledge-note-item strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.knowledge-note-item p{font-size:12px;color:var(--muted,#718489);line-height:1.45;margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.knowledge-note-item footer{display:flex;gap:8px;font-size:11px;color:#4f6b6f}.knowledge-note-item footer span:last-child{color:#9a6a2c}
.knowledge-notebook-detail{min-height:0;padding:22px;overflow:auto}.knowledge-notebook-detail>header{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line,#e5e7eb);padding-bottom:14px;margin-bottom:16px}.knowledge-detail-kicker{font-size:11px;color:#218b91;text-transform:uppercase}.knowledge-notebook-detail h3{margin:5px 0 0;font-size:22px}.knowledge-note-actions{display:flex;gap:8px;flex-wrap:wrap}.knowledge-notebook-detail form{display:grid;gap:12px}.knowledge-notebook-detail label{display:grid;gap:5px;font-size:12px;color:var(--muted,#718489)}.knowledge-notebook-detail input,.knowledge-notebook-detail textarea{font:inherit;font-size:14px;color:var(--ink,#243437);border:1px solid var(--line,#d8e0e0);border-radius:8px;padding:9px;background:#fff;resize:vertical}.knowledge-note-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--muted,#718489);line-height:1.5}.knowledge-note-meta em{color:#9a6a2c;font-style:normal}.knowledge-note-meta a{color:#146b70}.knowledge-notebook-trash-toggle{display:flex;justify-content:space-between;border:0;background:transparent;border-radius:7px;padding:9px 10px;text-align:left;color:var(--ink,#243437);cursor:pointer;font-size:12px}.knowledge-notebook-trash-toggle:hover,.knowledge-notebook-trash-toggle.active{background:#fff1f1;color:#a84545}.knowledge-notebook-trash-toggle small{font-size:10px}.knowledge-note-trash-detail{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted,#718489);text-align:center}.knowledge-note-trash-detail svg{width:24px;height:24px;color:#a84545}.knowledge-note-trash-detail strong{color:var(--ink,#243437);font-size:14px}.knowledge-note-trash-detail span{font-size:12px}
.knowledge-note-leave-overlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;background:rgba(21,47,50,.36);backdrop-filter:blur(2px)}.knowledge-note-leave-dialog{width:min(480px,calc(100vw - 32px));padding:18px;background:#fff;border:1px solid var(--line,#d8e0e0);border-radius:12px;box-shadow:0 20px 60px rgba(17,42,46,.22)}.knowledge-note-leave-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#243f44;font-size:14px}.knowledge-note-leave-dialog>header .icon-button{width:28px;height:28px}.knowledge-note-leave-dialog>p{margin:12px 0 18px;color:#617477;font-size:12px;line-height:1.6}.knowledge-note-leave-dialog>footer{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.knowledge-note-leave-dialog button{min-height:32px;padding:0 11px;font-size:11px}
@media (max-width:1120px){.knowledge-notebook{height:auto;min-height:640px;flex:none;grid-template-columns:180px minmax(220px,1fr)}.knowledge-notebook-detail{grid-column:1 / -1;border-top:1px solid var(--line,#e5e7eb)}}
/* Notebook: keep the three columns fixed and confine scrolling to lists and
   text fields instead of growing the page or adding a horizontal scrollbar. */
.knowledge-notebook-host { min-height: 0; overflow: hidden; display: flex; }
.knowledge-notebook-host > .knowledge-notebook { min-height: 0; }
.knowledge-notebook-filters, .knowledge-notebook-list, .knowledge-notebook-detail { min-width: 0; min-height: 0; }
.knowledge-note-items { min-width: 0; padding: 6px; gap: 4px; overflow-y: auto; overflow-x: hidden; }
.knowledge-note-item { min-width: 0; box-sizing: border-box; overflow: hidden; padding: 8px 10px; border-radius: 8px; }
.knowledge-note-item strong, .knowledge-note-item p, .knowledge-note-item footer { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.knowledge-note-item strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knowledge-note-item .knowledge-note-summary { display: -webkit-box; margin: 4px 0; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: calc(1.4em * 2); }
.knowledge-notebook-detail { display: flex; flex-direction: column; overflow: hidden; }
.knowledge-notebook-detail > header { flex: 0 0 auto; }
.knowledge-notebook-detail form { min-height: 0; flex: 1 1 auto; gap: 8px; overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
.knowledge-notebook-detail label { min-height: 0; font-size: 11px; }
.knowledge-notebook-detail input, .knowledge-notebook-detail textarea { box-sizing: border-box; min-width: 0; width: 100%; font-family: inherit; font-size: 13px; line-height: 1.45; }
.knowledge-notebook-detail textarea { resize: none; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; word-break: break-word; }
.knowledge-note-field-summary textarea { height: 78px; min-height: 78px; }
.knowledge-note-field-body { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.knowledge-note-field-body-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 预览/退出预览与主题切换按钮复用 .outline-button 体系：高度与灰度跟删除按钮保持一致，
   这里不再单独声明颜色与内边距，避免出现"比其他按钮浅、又比别的按钮矮"的偏差。 */
.knowledge-note-export { position: relative; display: inline-flex; }
.knowledge-note-export-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; gap: 2px; min-width: 264px; padding: 6px; border: 1px solid var(--line,#e5e7eb); border-radius: 8px; background: var(--paper,#fff); box-shadow: 0 12px 28px rgba(24,42,46,.16); }
.knowledge-note-export-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink,#243437); font: inherit; text-align: left; cursor: pointer; }
.knowledge-note-export-item:hover { background: #f2f7f7; }
.knowledge-note-export-item svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.knowledge-note-export-item strong { display: block; font-size: 12px; font-weight: 700; }
.knowledge-note-export-item small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted,#718489); line-height: 1.45; }
.knowledge-note-export-note { display: block; padding: 6px 10px 0; font-size: 10px; color: var(--muted,#718489); }
/* 编辑态「插入图片」工具条：菜单与地址行沿用导出菜单那套视觉，按钮复用 .outline-button 体系。 */
.knowledge-note-image-tools { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.knowledge-note-image-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; gap: 2px; min-width: 244px; padding: 6px; border: 1px solid var(--line,#e5e7eb); border-radius: 8px; background: var(--paper,#fff); box-shadow: 0 12px 28px rgba(24,42,46,.16); }
.knowledge-note-image-menu button { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink,#243437); font: inherit; text-align: left; cursor: pointer; }
.knowledge-note-image-menu button:hover { background: #f2f7f7; }
.knowledge-note-image-menu svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.knowledge-note-image-menu strong { display: block; font-size: 12px; font-weight: 700; }
.knowledge-note-image-menu small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted,#718489); line-height: 1.45; }
.knowledge-note-image-url { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line,#e5e7eb); border-radius: 8px; background: var(--paper,#fff); box-shadow: 0 12px 28px rgba(24,42,46,.16); }
.knowledge-note-image-url input { min-width: 320px; font: inherit; font-size: 13px; color: var(--ink,#243437); border: 1px solid var(--line,#d8e0e0); border-radius: 6px; padding: 7px 9px; background: #fff; }

/* 笔记正文表格（预览态）：与导出 HTML 的表格样式保持一致。 */
.knowledge-note-preview-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.knowledge-note-preview-body th, .knowledge-note-preview-body td { border: 1px solid var(--preview-line,#dfe2e1); padding: 6px 10px; text-align: left; vertical-align: top; }
.knowledge-note-preview-body th { background: var(--preview-paper-edge,#e9ebea); font-weight: 700; }

/* 预览主题变量：仅作用于预览容器（data-note-theme 作用域），编辑态与全站零变化。 */
.knowledge-note-preview[data-note-theme="dark"] { --preview-paper:#2e3539; --preview-paper-edge:#282e32; --preview-ink:#eceff0; --preview-ink-soft:#a9b0b3; --preview-line:#454d52; --preview-link:#9cc6ca; --preview-code-bg:#363e43; --preview-code-ink:#dfe4e5; --preview-quote-bar:#55636a; --preview-img-border:#454f54; --preview-img-bg:#2a3135; --preview-scrim:rgba(18,22,24,.78); }
.knowledge-note-preview[data-note-theme="light"] { --preview-paper:#f2f3f2; --preview-paper-edge:#e9ebea; --preview-ink:#26292a; --preview-ink-soft:#6b7173; --preview-line:#dfe2e1; --preview-link:#34666b; --preview-code-bg:#e8eae9; --preview-code-ink:#3a4143; --preview-quote-bar:#c3c8c7; --preview-img-border:#dcdfde; --preview-img-bg:#ffffff; --preview-scrim:rgba(20,22,23,.72); }

.knowledge-note-preview { position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden; border:1px solid var(--preview-line,#454d52); border-radius:6px; padding:16px 18px; background:var(--preview-paper,#2e3539); color:var(--preview-ink,#eceff0); font-size:13.5px; line-height:1.75; overflow-wrap:anywhere; word-break:break-word; }
.knowledge-note-preview--immersive { flex: 1 1 auto; border:0; border-radius:0; }
.knowledge-note-preview-body { max-width: 760px; margin: 0 auto; }
.knowledge-note-preview h1, .knowledge-note-preview h2, .knowledge-note-preview h3, .knowledge-note-preview h4, .knowledge-note-preview h5, .knowledge-note-preview h6 { margin: 14px 0 8px; line-height: 1.35; color: var(--preview-ink,#dfe7e8); }
.knowledge-note-preview h1 { font-size: 20.5px; max-width: 760px; margin: 0 auto 8px; }
.knowledge-note-preview h2 { font-size: 15.5px; }
.knowledge-note-preview h3 { font-size: 14px; } .knowledge-note-preview h4, .knowledge-note-preview h5, .knowledge-note-preview h6 { font-size: 13px; }
.knowledge-note-preview p { margin: 10px 0; }
.knowledge-note-preview ul, .knowledge-note-preview ol { margin: 10px 0; padding-left: 22px; }
.knowledge-note-preview blockquote { margin: 10px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--preview-quote-bar,#35525a); color: var(--preview-ink-soft,#93a2a5); }
/* 笔记正文里的代码块**必须自动折行**：模型常把「原话」包成 ```text 代码块，
   而 pre 默认不折行（还配了 overflow-x:auto），长句子就横向溢出 —— 看着"只有一行"。
   改成 pre-wrap 后按宽度折行，5 行、10 行都能正常显示。 */
.knowledge-note-preview pre { margin: 10px 0; padding: 12px; background:var(--preview-code-bg,#16242a); border-radius:6px; overflow-x:auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.knowledge-note-preview code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background:var(--preview-code-bg,#16242a); color:var(--preview-code-ink,#cfdadc); padding:1px 4px; border-radius:4px; }
.knowledge-note-preview pre code { background: transparent; padding:0; }
.knowledge-note-preview a { color: var(--preview-link,#7fb6bb); }

/* 图片栅格：默认两列；单图/两图每图最高 200px；三列每图 150px；居中。 */
.knowledge-note-preview .knowledge-md-image { max-width: 100%; height:auto; max-height:200px; width:auto; object-fit:contain; border-radius:6px; display:block; margin:14px auto; cursor: zoom-in; border:1px solid var(--preview-img-border,#263840); background:var(--preview-img-bg,#0d1518); }
.knowledge-note-preview .knowledge-md-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; align-items:center; justify-items:center; }
.knowledge-note-preview .knowledge-md-grid[data-cols="3"] { grid-template-columns:1fr 1fr 1fr; }
.knowledge-note-preview .knowledge-md-grid .knowledge-md-image { margin:0 auto; }
.knowledge-note-preview .knowledge-md-grid[data-cols="3"] .knowledge-md-image { max-height:150px; }
.knowledge-note-preview .knowledge-md-image-blocked { display:inline-block; color:#b85c68; background:#2a1a1e; border-radius:4px; padding:2px 6px; font-size:12px; }
.knowledge-note-preview .knowledge-md-figure { margin: 14px 0; }
.knowledge-note-preview .knowledge-md-figure figcaption { color:var(--preview-ink-soft,#93a2a5); font-size:11.5px; text-align:center; margin-top:4px; }
.knowledge-note-preview .knowledge-note-preview-empty { color: var(--preview-ink-soft,#93a2a5); font-size:12px; }

/* 预览元信息与未保存提示条。 */
.knowledge-note-preview-meta { max-width:760px; margin: 4px auto 14px; color: var(--preview-ink-soft,#93a2a5); font-size:12px; }
.knowledge-note-preview-banner { max-width:760px; margin: 0 auto 14px; padding: 8px 12px; border:1px solid var(--preview-line,#263439); background: var(--preview-paper-edge,#0e171a); color: var(--preview-ink,#dfe7e8); border-radius:6px; font-size:12px; }
/* 预览态整列沉浸：覆盖编辑表单的 grid 布局，隐藏标题/摘要/来源等，保留保存按钮。 */
.knowledge-notebook-detail .knowledge-note-preview-form { display:flex; flex-direction:column; overflow:hidden; grid-template-rows:none; }
.knowledge-note-preview-form .knowledge-note-preview { flex:1 1 auto; display:flex; flex-direction:column; }
.knowledge-note-preview .run-button { margin-top: 16px; }

/* 点图内嵌 lightbox：覆盖预览区，不新开页面/标签。 */
.knowledge-note-lightbox { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 22px; background: var(--preview-scrim, rgba(6,10,12,.78)); cursor: zoom-out; }
.knowledge-note-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.knowledge-note-lightbox-close { position: absolute; top: 14px; right: 14px; z-index: 1; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--preview-line,#263439); border-radius:6px; background: var(--preview-paper-edge,#0e171a); color: var(--preview-ink,#dfe7e8); cursor:pointer; }
.knowledge-note-lightbox-close svg { width:16px; height:16px; }

/* 窄屏降列：<640px 三列→两列；<460px 全部单列。 */
@media (max-width:640px){ .knowledge-note-preview .knowledge-md-grid[data-cols="3"] { grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .knowledge-note-preview .knowledge-md-grid[data-cols="3"], .knowledge-note-preview .knowledge-md-grid { grid-template-columns:1fr; } }

.knowledge-note-field-body textarea { min-height: 0; height: auto; }
.knowledge-note-field-hint { display:block; margin-top:-2px; color:var(--faint,#8a999b); font-size:10px; line-height:1.35; }
.knowledge-note-save-hint { color: var(--muted,#718489); font-size: 10px; line-height: 1.35; }
.personal-knowledge-notebook-main { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.personal-knowledge-notebook-main > .knowledge-notebook { min-height: 0; flex: 1 1 auto; }
@media (max-width:1120px) {
  .knowledge-notebook-host { overflow: auto; }
  .knowledge-notebook-host > .knowledge-notebook { min-height: 640px; }
  .knowledge-notebook-detail { overflow: auto; }
  .knowledge-notebook-detail form { overflow: visible; }
  .knowledge-note-field-body textarea { height: 260px; min-height: 180px; }
  .personal-knowledge-notebook-main { overflow: auto; }
}

/* ==========================================================================
   知识库笔记本 · 「一体化纸面」视觉（浅色）
   作用范围：仅笔记本页的筛选列 / 我的笔记列 / 预览列，以及预览纸面的浅色变量。
   约束：不改任何 DOM 结构；不触碰左栏(.knowledge-sidebar)、.knowledge-workbench、--cyan 等
         全局 token；预览区的亮/暗切换（data-note-theme）行为与数值保持原样。
   思路：三列与左栏同底色(#f7f9f8)，内容改由白色卡片承载，层次靠卡片浮起而非色块填充。
   ========================================================================== */

/* 1. 画布：三列与左栏同底，去掉逐块填充 */
.knowledge-notebook { background: #f7f9f8; border-color: #e6edec; border-radius: 12px; }
.knowledge-notebook-filters { background: transparent; border-right-color: #e6edec; }
.knowledge-notebook-list { background: transparent; border-right-color: #e6edec; }
.knowledge-notebook-detail { background: transparent; }

/* 2. 筛选列 */
.knowledge-notebook-brand svg { color: #1e9eaa; }
.knowledge-notebook-brand strong { color: #1b2529; font-size: 11px; font-weight: 650; }
.knowledge-notebook-brand small { color: #97a5a5; font-size: 11px; }
.knowledge-notebook-filters > input,
.knowledge-notebook-filters > select { height: 32px; box-sizing: border-box; background: #fff; border-color: #e6edec; border-radius: 8px; color: #1b2529; font-size: 11px; }
.knowledge-notebook-filters nav { gap: 2px; }
.knowledge-notebook-filters nav button { padding: 7px 9px; border-radius: 7px; color: #6d7e80; font-size: 11px; font-weight: 500; }
.knowledge-notebook-filters nav button:hover { background: #eef4f3; color: #1b2529; }
.knowledge-notebook-filters nav button.active { background: #e4f1f1; color: #146b70; font-weight: 600; box-shadow: inset 2px 0 0 #1e9eaa; }
.knowledge-notebook-filters nav button small { color: #97a5a5; font-size: 11px; }
.knowledge-notebook-filters nav button.active small { color: #146b70; }
.knowledge-notebook-trash-toggle { padding: 7px 9px; border-radius: 7px; color: #6d7e80; font-size: 11px; }
.knowledge-notebook-trash-toggle:hover, .knowledge-notebook-trash-toggle.active { background: #fdeeee; color: #a84545; }
.knowledge-notebook-trash-toggle small { color: #97a5a5; font-size: 11px; }
.knowledge-notebook-hint { color: #97a5a5; font-size: 11px; line-height: 1.7; }

/* 3. 我的笔记列：一条笔记 = 一张白色卡片 */
.knowledge-notebook-list > header { padding: 16px 16px 14px; border-bottom-color: #e6edec; }
.knowledge-notebook-list > header strong { color: #1b2529; font-size: 11px; font-weight: 650; }
.knowledge-notebook-list > header span { color: #97a5a5; font-size: 11px; }
.knowledge-notebook-list > header .knowledge-notebook-list-actions { display: flex; align-items: center; gap: 6px; }
.knowledge-notebook-list-actions .outline-button { min-height: 28px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.knowledge-notebook-list-actions .outline-button svg { width: 13px; height: 13px; }

/* 新建笔记：底部动作（保存 / 保存并整理）+ 正文下方的实时预览。
   预览里给图片 max-width:100%，插入的图当场就能完整看见，不会把面板撑破。 */
.knowledge-note-create-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 2px; }
.knowledge-note-live-preview { min-height: 120px; max-height: 320px; margin-top: 8px; padding: 12px 14px; overflow: auto; color: #2b3a3f; background: #fbfdfd; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; font-size: 12px; line-height: 1.7; }
/* 预览区里的图片：尺寸与「笔记预览态」完全一致（限高 200px、宽度自适应居中），
   这样插进来的大图不会铺满整个预览区，也不会让人误以为"图坏了"。 */
.knowledge-note-live-preview img { max-width: 100%; max-height: 200px; width: auto; height: auto; object-fit: contain; display: block; margin: 10px auto; border-radius: 6px; background: #eef2f3; }
.knowledge-note-live-preview img.knowledge-md-grid-img, .knowledge-note-live-preview .knowledge-md-grid img { margin: 0 auto; }
.knowledge-note-live-preview h1, .knowledge-note-live-preview h2, .knowledge-note-live-preview h3 { margin: .6em 0 .3em; font-size: 14px; }
.knowledge-note-live-preview pre { padding: 8px 10px; overflow: auto; background: #f1f6f6; border-radius: 6px; font-size: 11px; }
.knowledge-note-preview-empty { color: var(--muted, #718489); font-size: 11px; }
.knowledge-note-items { padding: 10px; gap: 8px; }
.knowledge-note-item { padding: 12px 13px; background: #fff; border: 1px solid #e9efee; border-radius: 10px; box-shadow: 0 1px 2px rgba(24,42,46,.05); }
.knowledge-note-item:hover { background: #fff; border-color: #cfe3e1; }
.knowledge-note-item.active { background: #fff; border-color: #cfe3e1; box-shadow: inset 3px 0 0 #1e9eaa, 0 1px 2px rgba(24,42,46,.05); }
.knowledge-note-item strong { color: #1b2529; font-size: 11px; font-weight: 600; line-height: 1.5; }
.knowledge-note-item .knowledge-note-summary { margin: 5px 0 8px; color: #6d7e80; font-size: 11px; line-height: 1.6; max-height: calc(1.6em * 2); }
/* 手写新建、还没让模型整理过的笔记：列表里给个醒目但不吵的提示（放在「已保存」之前，不影响既有首/尾样式） */
.knowledge-note-item footer .knowledge-note-todo { padding: 1px 6px; color: #a8621a; background: #fdf1dd; border: 1px solid #f0dcbb; border-radius: 999px; font-weight: 800; }
/* 新建态底部那行自动保存状态 */
.knowledge-note-autosave { padding: 2px 1px 0; color: var(--muted, #718489); font-size: 11px; }
.knowledge-note-item footer { display: flex; align-items: center; gap: 8px; }
.knowledge-note-item footer span:first-child { padding: 2px 8px; background: #e6f2f1; border-radius: 999px; color: #1f6e73; font-size: 11px; font-weight: 600; line-height: 1.5; }
.knowledge-note-item footer span:last-child { color: #7b8e91; font-size: 11px; }

/* 4. 预览列：表头与操作区 */
.knowledge-notebook-detail > header { border-bottom-color: #e6edec; }
.knowledge-detail-kicker { color: #1e9eaa; font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.knowledge-notebook-detail h3 { margin: 6px 0 0; color: #1b2529; font-size: 20px; font-weight: 650; line-height: 1.4; letter-spacing: -.01em; }
.knowledge-note-actions { gap: 6px; }
.knowledge-note-actions .outline-button,
.knowledge-note-actions .run-button { height: 30px; padding: 0 11px; border-radius: 7px; font-size: 11px; }

/* 5. 编辑态：浅底上的白色输入卡片 */
.knowledge-notebook-detail input,
.knowledge-notebook-detail textarea { border-color: #e6edec; border-radius: 8px; background: #fff; }
.knowledge-notebook-detail label { color: #6d7e80; }
.knowledge-note-meta { color: #6d7e80; }
.knowledge-note-meta em, .knowledge-note-meta a { color: #146b70; }
.knowledge-note-save-hint, .knowledge-note-field-hint { color: #97a5a5; }

/* 6. 预览纸面：白色纸张卡片（浅色主题变量，暗色主题保持原样） */
.knowledge-note-preview[data-note-theme="light"] {
  --preview-paper: #ffffff; --preview-paper-edge: #f4f7f7; --preview-line: #e9eff0;
  --preview-ink: #1b2529; --preview-ink-soft: #6d7e80; --preview-link: #146b70;
  --preview-code-bg: #f2f6f6; --preview-code-ink: #2b3a3d; --preview-quote-bar: #cfe3e1;
  --preview-img-border: #e6edec; --preview-img-bg: #ffffff;
}
.knowledge-note-preview { padding: 22px 26px 32px; line-height: 1.8; }
.knowledge-note-preview--immersive { border: 1px solid var(--preview-line, #e9eff0); border-radius: 10px; }
.knowledge-note-preview h2 { margin: 24px 0 9px; font-size: 15px; }

/* 7. 预览内的表格：圆角卡片 + 极浅行分隔 */
.knowledge-note-preview-body table { width: 100%; margin: 14px 0; border: 1px solid var(--preview-line, #e9eff0); border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.knowledge-note-preview-body th, .knowledge-note-preview-body td { border: 0; padding: 8px 11px; }
.knowledge-note-preview-body th { background: var(--preview-paper-edge, #f4f7f7); font-weight: 700; }
.knowledge-note-preview-body td { border-top: 1px solid var(--preview-line, #e9eff0); }

/* ==========================================================================
   知识库笔记本 · 集合 / 智能视图 / 批量操作 / 详情分区（方案二）
   字号与「笔记本列 / 我的笔记列」保持一致：正文级文字统一 11px。
   ========================================================================== */

/* 1. 筛选列的分组结构 */
.knowledge-filter-group { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--soft-line, #eaf0f1); }
.knowledge-filter-group > header { display: flex; align-items: center; gap: 6px; padding: 0 2px 7px; color: #6d7e80; font-size: 11px; font-weight: 700; }
.knowledge-filter-group > header > span { flex: 1; }
.knowledge-filter-fold { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; color: #97a5a5; background: transparent; border: 0; border-radius: 5px; }
.knowledge-filter-fold:hover { color: #1b2529; background: #eef4f3; }
.knowledge-filter-fold svg { width: 12px; height: 12px; }
.knowledge-filter-new { height: 22px; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; color: #146b70; background: #fff; border: 1px dashed #cfe3e1; border-radius: 6px; font-size: 10px; font-weight: 700; }
.knowledge-filter-new:hover { border-style: solid; border-color: #1e9eaa; }
.knowledge-filter-new svg { width: 11px; height: 11px; }
.knowledge-filter-group.collapsed .knowledge-filter-body { display: none; }
.knowledge-filter-body { display: grid; gap: 2px; }
.knowledge-filter-empty, .knowledge-filter-note { margin: 2px 4px 0; color: #97a5a5; font-size: 10.5px; line-height: 1.6; }
.knowledge-filter-note { margin-top: 6px; }

/* 2. 集合 / 智能视图行 */
.knowledge-tree-item { position: relative; display: grid; }
.knowledge-tree-row { width: 100%; min-width: 0; display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 9px; color: #6d7e80; background: transparent; border: 0; border-radius: 7px; text-align: left; font-size: 11px; }
.knowledge-tree-row svg { width: 13px; height: 13px; }
.knowledge-tree-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-tree-row > small { color: #97a5a5; font-size: 11px; }
.knowledge-tree-row:hover { color: #1b2529; background: #eef4f3; }
.knowledge-tree-row.active { color: #146b70; background: #e4f1f1; font-weight: 600; box-shadow: inset 2px 0 0 #1e9eaa; }
.knowledge-tree-row.active svg, .knowledge-tree-row.active small { color: #146b70; }
.knowledge-view-del { position: absolute; top: 50%; right: 4px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; color: #97a5a5; background: transparent; border: 0; border-radius: 5px; opacity: 0; transform: translateY(-50%); }
.knowledge-tree-item:hover .knowledge-view-del { opacity: 1; }
.knowledge-view-del:hover { color: #a84545; background: #fdeeee; }
.knowledge-view-del svg { width: 12px; height: 12px; }
.knowledge-view-form { display: grid; grid-template-columns: minmax(0, 1fr) 26px 26px; gap: 5px; margin: 2px 0 6px; }
.knowledge-view-form input { height: 29px; min-width: 0; padding: 0 8px; background: #fff; border: 1px solid var(--line, #e6edec); border-radius: 7px; font-size: 11px; outline: none; }
.knowledge-view-form button { width: 26px; height: 29px; display: grid; place-items: center; color: #6d7e80; background: #fff; border: 1px solid var(--line, #e6edec); border-radius: 7px; }
.knowledge-view-form button:hover { color: #146b70; border-color: #cfe3e1; }
.knowledge-view-form button svg { width: 13px; height: 13px; }

/* 3. 列表：多选与批量条 */
.knowledge-note-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 4px; }
.knowledge-note-pick { width: 14px; height: 14px; margin: 14px 0 0 2px; accent-color: #1e9eaa; cursor: pointer; }
.knowledge-note-row.picked .knowledge-note-item { border-color: #1e9eaa; }
.knowledge-note-chip { flex: 0 0 auto; padding: 1.5px 7px; color: #6b5bd2; background: #eeecfb; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; }

.knowledge-batch-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; padding: 4px; background: #fff; border: 1px solid #dce5e4; border-radius: 10px; }
.knowledge-batch-bar > strong { color: #6d7e80; font-size: 11px; padding: 0 6px; }
.knowledge-batch-bar > button { height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; color: #146b70; background: transparent; border: 1px solid transparent; border-radius: 7px; font-size: 10.5px; font-weight: 700; transition: background .12s ease, color .12s ease; }
.knowledge-batch-bar > button:hover:not(:disabled) { color: #0f5c61; background: #eef6f6; }
.knowledge-batch-bar > button.on { color: #fff; background: #1e9eaa; border-color: #1e9eaa; }
.knowledge-batch-bar > button.danger { color: #a84545; }
.knowledge-batch-bar > button.danger:hover:not(:disabled) { background: #fbeeee; }
.knowledge-batch-bar > button:disabled { color: #b6c2c6; cursor: not-allowed; }
.knowledge-batch-bar > button svg { width: 12px; height: 12px; }
.knowledge-batch-bar.is-idle { background: #fcfefe; border-color: #e8eeee; }
.knowledge-batch-clear { margin-left: auto; color: #6d7e80 !important; background: transparent !important; border-color: transparent !important; }

/* --- 标签多选筛选：触发器 + 复选面板 + 已选芯片 --- */
.knowledge-tag-filter { display: flex; flex-direction: column; gap: 6px; }
.knowledge-tag-trigger { width: 100%; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 10px; color: #3d4c52; background: #fff; border: 1px solid var(--line, #dce5e4); border-radius: 8px; font-size: 11.5px; cursor: pointer; text-align: left; }
.knowledge-tag-trigger span { flex: 1; }
.knowledge-tag-trigger.active { border-color: #1e9eaa; color: #146b70; }
.knowledge-tag-trigger small { min-width: 16px; height: 16px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #1e9eaa; border-radius: 999px; font-size: 10px; font-weight: 700; }
.knowledge-tag-trigger svg { width: 13px; height: 13px; }
.knowledge-tag-menu { max-height: 220px; overflow: auto; padding: 5px; background: #fff; border: 1px solid var(--line, #dce5e4); border-radius: 8px; box-shadow: 0 8px 20px rgba(24, 42, 46, .08); }
.knowledge-tag-option { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 6px; font-size: 11.5px; color: #3d4c52; cursor: pointer; }
.knowledge-tag-option:hover { background: #eef6f6; }
.knowledge-tag-option input { margin: 0; accent-color: #1e9eaa; }
.knowledge-tag-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-tag-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.knowledge-tag-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 8px; color: #146b70; background: #e6f5f6; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.knowledge-tag-chip button { display: inline-flex; align-items: center; padding: 0; color: #6d8b8e; background: transparent; border: 0; cursor: pointer; }
.knowledge-tag-chip button:hover { color: #a84545; }
.knowledge-tag-chip svg { width: 11px; height: 11px; }
.knowledge-tag-clearall { padding: 2px 8px; color: #6d7e80; background: transparent; border: 1px dashed var(--line, #dce5e4); border-radius: 999px; font-size: 10.5px; cursor: pointer; }
.knowledge-tag-clearall:hover { color: #a84545; border-color: #eccfcf; }


.knowledge-pick-pop { position: absolute; top: calc(100% + 4px); left: 12px; z-index: 40; min-width: 236px; max-height: 300px; overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--line, #e6edec); border-radius: 10px; box-shadow: 0 14px 32px rgba(24, 42, 46, .16); }
.knowledge-pick-pop > button { width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 8px; color: #6d7e80; background: transparent; border: 0; border-radius: 7px; text-align: left; font-size: 11px; }
.knowledge-pick-pop > button:hover { color: #1b2529; background: #e4f1f1; }
.knowledge-pick-pop > button.on { color: #146b70; background: #e4f1f1; font-weight: 600; }
.knowledge-pick-pop > button svg { width: 13px; height: 13px; }
.knowledge-pick-pop > button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-pick-pop > button small { color: #97a5a5; font-size: 10px; }
.knowledge-pick-pop > p { margin: 6px 8px; color: #97a5a5; font-size: 10.5px; }

/* 4. 详情列：正文区 + 下方详细信息区（元数据不再挤占正文高度） */
.knowledge-notebook-detail { padding: 0; overflow: hidden; }
/* 详情列的 padding 已移到正文区，header 必须补回左右内边距，
   否则 kicker 与标题会贴到最左边、和下方表单（22px 缩进）错位。 */
.knowledge-notebook-detail > header { padding-left: 22px; padding-right: 22px; }
.knowledge-note-detail-body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; padding: 22px; }
/* 新建态（data-note-creating）：正文区与预览区**等高**平分可用高度，
   「整理保存」夹在两者之间（改成上下都紧贴、各自留白收紧，视觉上就上移了一点）。
   选择器带 [data-note-creating] 限定 —— 已有笔记的编辑表单完全不受影响。 */
form[data-note-creating] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
form[data-note-creating] .knowledge-note-field-body { flex: 1 1 auto; min-height: 0; }
form[data-note-creating] .knowledge-note-field-body textarea { flex: 1 1 auto; height: auto; min-height: 120px; }
form[data-note-creating] .knowledge-note-autosave { flex: 0 0 auto; padding: 0; margin-top: -2px; }
form[data-note-creating] .knowledge-note-create-actions { flex: 0 0 auto; padding: 0; margin-top: -4px; }
form[data-note-creating] .knowledge-note-live-preview { flex: 1 1 auto; min-height: 120px; max-height: none; margin-top: 0; }
.knowledge-note-detail-more { flex: 0 0 auto; border-top: 1px solid var(--line, #e6edec); background: #fbfdfd; }
.knowledge-note-detail-more > header { display: flex; align-items: center; gap: 8px; padding: 10px 22px; }
.knowledge-note-detail-more > header > strong { flex: 0 0 auto; color: #1b2529; font-size: 11px; }
.knowledge-more-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #97a5a5; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-note-detail-more.collapsed .knowledge-note-more-body { display: none; }
.knowledge-note-more-body { max-height: min(42vh, 420px); overflow: auto; padding: 0 22px 16px; }
.knowledge-note-more-body > .knowledge-note-meta { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--soft-line, #eaf0f1); }
.knowledge-note-block { margin-top: 12px; }
.knowledge-note-block > header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.knowledge-note-block > header > strong { flex: 0 0 auto; color: #1b2529; font-size: 11px; }
.knowledge-block-hint { color: #97a5a5; font-size: 10px; }
.knowledge-note-block > header > button { margin-left: auto; }
.knowledge-note-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.knowledge-note-chip-editable { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; color: #6b5bd2; background: #eeecfb; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.knowledge-note-chip-editable button { width: 14px; height: 14px; display: grid; place-items: center; padding: 0; color: inherit; background: transparent; border: 0; opacity: .65; }
.knowledge-note-chip-editable button:hover { opacity: 1; }
.knowledge-note-chip-editable button svg { width: 11px; height: 11px; }
.knowledge-note-chip-empty { color: #97a5a5; font-size: 10.5px; }
.knowledge-related-list { display: grid; gap: 5px; }
.knowledge-related-row { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 9px; background: #fff; border: 1px solid #e9efee; border-radius: 8px; text-align: left; font-size: 11px; }
.knowledge-related-row:hover { border-color: #cfe3e1; }
.knowledge-related-row svg { width: 13px; height: 13px; color: #1e9eaa; }
.knowledge-related-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 5. 编辑区「标签」行：高度固定两行，标签多了在框内滚动 */
.knowledge-note-field-tags { display: grid; gap: 5px; font-size: 11px; }
.knowledge-note-field-tags > span:first-child { color: #6d7e80; font-weight: 600; }
.knowledge-note-tag-box { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 5px; min-height: 52px; max-height: 52px; overflow-y: auto; padding: 6px 9px; background: #fff; border: 1px solid #e6edec; border-radius: 8px; }
.knowledge-note-tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 8px; color: #146b70; background: #e6f2f1; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.knowledge-note-tag button { width: 14px; height: 14px; display: grid; place-items: center; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 50%; opacity: .65; }
.knowledge-note-tag button:hover { opacity: 1; background: rgba(20, 107, 112, .12); }
.knowledge-note-tag button svg { width: 11px; height: 11px; }
.knowledge-note-tag-box input { flex: 1 1 88px; min-width: 88px; height: 22px; padding: 0 2px; color: #1b2529; background: transparent; border: 0; outline: none; font-size: 11px; }

/* 编辑表单多了一行「标签」，重排网格行：标题 / 标签 / 摘要 / 正文(1fr) / 按钮 */
.knowledge-notebook-detail form { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }


/* ============ 项目中心（方案一 · 画廊 面板版）阶段①-A ============
   面板尺寸对齐设计稿；范围列改为「图标 + 名称 + 计数胶囊」；根目录命名为「未分组」。
   只覆盖尺寸与范围列样式，不改动任何交互契约。 */
.project-center-panel {
  width: min(1680px, 96vw);
  height: min(1160px, 92vh);
  max-width: none;
  max-height: none;
}

.project-center-body {
  grid-template-columns: 220px minmax(0, 1fr);
}

.center-rail-kicker {
  padding: 0 8px 6px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.center-rail-block .center-scope-button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background .16s var(--ease);
}

.center-rail-block .center-scope-button:hover { background: var(--canvas); }
.center-rail-block .center-scope-button.active { background: var(--cyan-soft); color: #146b70; font-weight: 700; }
.center-rail-block .center-scope-button > i,
.center-rail-block .center-scope-button > svg { width: 15px; height: 15px; flex: 0 0 auto; }
.center-scope-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.center-scope-count {
  margin-left: auto;
  padding: 1px 7px;
  color: var(--muted);
  background: var(--canvas);
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
}

.center-rail-block .center-scope-button.active .center-scope-count { background: #ffffff; color: var(--cyan); }

.center-rail-tip {
  margin-top: auto;
  padding: 10px 8px 4px;
  border-top: 1px dashed var(--soft-line);
  color: var(--faint);
  font-size: 10px;
  line-height: 1.7;
}


/* ============ 阶段①-B：项目卡片网格 + 详情抽屉 ============ */
.project-explorer-shell {
  position: relative;
  display: block;
  min-height: 0;
}

.pc-projects-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 10px;
}

.pc-projects-head strong { color: var(--ink); font-size: 12px; }
.pc-projects-head .project-explorer-head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.pc-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  align-content: start;
  padding-right: 0;
}

.project-explorer-shell:has(.pc-detail.open) .pc-project-grid {
  padding-right: min(680px, 46%);
}

.pc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.pc-card:hover {
  transform: translateY(-3px);
  border-color: #c9dcdd;
  box-shadow: 0 12px 28px rgba(31, 52, 59, .14);
}

.pc-card.selected { border-color: var(--cyan); box-shadow: 0 12px 28px rgba(30, 158, 170, .18); }

.pc-card-cover {
  position: relative;
  aspect-ratio: 3 / 2;
  background:
    linear-gradient(135deg, #dff4f4, #eaf6f5 58%, #ffffff),
    radial-gradient(120px 60px at 82% 18%, rgba(30, 158, 170, .26), transparent),
    repeating-linear-gradient(115deg, rgba(30, 158, 170, .10) 0 2px, transparent 2px 13px);
}

.pc-card-ver,
.pc-card-live {
  position: absolute;
  top: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
}

.pc-card-ver { left: 9px; color: #146b70; background: rgba(255, 255, 255, .88); }
.pc-card-live { right: 9px; color: #ffffff; background: rgba(24, 33, 39, .58); font-weight: 700; }

.pc-card-body { padding: 10px 11px 12px; }

.pc-card-body h3 {
  margin: 0 0 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-card-body p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.6; }

.pc-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.6;
}

.pc-card-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-card-ops { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .16s var(--ease); }
.pc-card:hover .pc-card-ops { opacity: 1; }

.pc-project-empty {
  grid-column: 1 / -1;
  padding: 30px 16px;
  color: var(--faint);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 12px;
  text-align: center;
}

/* 详情抽屉：右对齐覆盖在卡片网格上 */
.pc-detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  width: min(680px, 86%);
  overflow: hidden;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-radius: 10px 0 0 10px;
  box-shadow: -20px 0 46px rgba(31, 52, 59, .16);
  transform: translateX(102%);
  transition: transform .3s var(--ease);
}

.pc-detail.open { transform: none; }
.pc-detail > .project-explorer-tree { min-height: 0; overflow: auto; border-right: 1px solid var(--soft-line); }
.pc-detail > .project-explorer-content { min-height: 0; overflow: auto; }


/* ============ 批次 A：画布卡片网格（最近画布 / 临时画布 / 回收站） ============ */
.project-canvas-list.pc-canvas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  align-content: start;
}

.pc-canvas-grid .project-canvas-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.pc-canvas-grid .project-canvas-row:hover {
  transform: translateY(-3px);
  border-color: #c9dcdd;
  box-shadow: 0 12px 28px rgba(31, 52, 59, .14);
}

.pc-canvas-grid .project-canvas-row.active { border-color: var(--cyan); }

/* 封面位：3:2，用渐变占位（真实封面在阶段③接入） */
.pc-canvas-grid .project-canvas-row::before {
  content: '';
  display: block;
  aspect-ratio: 3 / 2;
  background:
    linear-gradient(135deg, #e9eff0, #f8fbfb 58%, #ffffff),
    radial-gradient(120px 60px at 82% 18%, rgba(30, 158, 170, .18), transparent),
    repeating-linear-gradient(115deg, rgba(30, 158, 170, .08) 0 2px, transparent 2px 13px);
}

.pc-canvas-grid .project-canvas-row .project-canvas-main {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 10px 11px 0;
  text-align: left;
}

.pc-canvas-grid .project-canvas-row .center-canvas-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.pc-canvas-grid .project-canvas-row .center-canvas-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pc-canvas-grid .project-canvas-row .center-canvas-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-canvas-grid .project-canvas-row .center-canvas-copy small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.pc-canvas-grid .project-canvas-row .center-canvas-actions {
  display: flex;
  gap: 4px;
  margin: 0 11px 11px;
  opacity: 0;
  transition: opacity .16s var(--ease);
}

.pc-canvas-grid .project-canvas-row:hover .center-canvas-actions { opacity: 1; }
.pc-canvas-grid .project-canvas-row .canvas-action-spacer { display: none; }

/* 批量模式：勾选框浮到封面右上 */
.pc-canvas-grid .project-canvas-row.batch-row { cursor: default; }
.pc-canvas-grid .project-canvas-row .batch-check {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  margin: 0;
}

.pc-canvas-grid .project-canvas-row.batch-row { position: relative; }


/* ============ 批次 B：内联编辑与内联二次确认 ============ */
.pc-inline-input {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--cyan);
  border-radius: 6px;
  outline: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(30, 158, 170, .12);
}

.project-explorer-directory-row .pc-inline-input,
.project-explorer-canvas-copy .pc-inline-input { height: 22px; font-size: 11.5px; }

.pc-inline-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 9px;
  color: var(--danger);
  background: #fdf1f1;
  border: 1px solid #edcdcd;
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.5;
}

.pc-inline-confirm span { min-width: 0; flex: 1 1 auto; }
.project-explorer-directory-row + .pc-inline-confirm { margin: 6px 0 2px; }


/* ============ 批次 D：项目封面 ============ */
.pc-card-cover.has-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pc-card-cover.has-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 20, 24, .18), rgba(11, 20, 24, .06) 45%, transparent);
}


/* ============ 修复：全部项目页（卡片尺寸 / 抽屉布局 / 字号） ============ */

/* 抽屉改为覆盖在网格之上，不再挤压项目卡片，保证项目卡片与画布卡片同宽 */
.project-explorer-shell:has(.pc-detail.open) .pc-project-grid {
  padding-right: 0;
}

.pc-project-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.pc-detail {
  grid-template-columns: 200px minmax(0, 1fr);
  width: min(680px, 74%);
}

/* 抽屉内目录：字号与行高放大，去掉画布重复列表后的留白 */
.pc-detail .project-explorer-tree header strong,
.pc-detail .project-explorer-tree header small { font-size: 12px; }

.pc-detail .project-explorer-directory-row { min-height: 34px; }

.pc-detail .project-explorer-directory-main strong {
  font-size: 12.5px;
  font-weight: 700;
}

.pc-detail .project-explorer-directory-main svg { width: 14px; height: 14px; }

.pc-detail .project-explorer-tree-canvases { display: none; }

/* 抽屉内画布卡片：名称与元信息放大 */
.pc-detail .project-explorer-canvas-card { padding: 12px; }

.pc-detail .project-explorer-canvas-copy strong {
  font-size: 13.5px;
  font-weight: 700;
}

.pc-detail .project-explorer-canvas-times small {
  font-size: 11px;
  line-height: 1.55;
}

.pc-detail .project-explorer-canvas-times time { font-size: 11px; }

.pc-detail .project-explorer-content-head strong { font-size: 13.5px; }
.pc-detail .project-explorer-content-head small { font-size: 11px; }

.pc-detail .project-explorer-canvas-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.pc-detail .project-explorer-content-empty { font-size: 12px; }


/* ============ 修复 2：抽屉左列头部两行显示 + 字号对齐项目卡片 ============ */

/* 左列 / 右列头部：标题一行、排序与操作一行 */
.pc-detail .project-explorer-tree > header,
.pc-detail .project-explorer-content > header {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 8px;
}

.pc-detail .project-explorer-tree > header > div:first-child,
.pc-detail .project-explorer-content > header > div:first-child {
  flex: 1 1 100%;
  min-width: 0;
}

.pc-detail .project-explorer-head-actions {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
}

.pc-detail .project-explorer-head-actions .project-column-sort,
.pc-detail .project-explorer-head-actions .project-sort-control { margin-left: 0; }

.pc-detail .project-explorer-directory-list { padding-top: 2px; }

/* 左列宽度略放宽，配合两行头部 */
.pc-detail { grid-template-columns: 216px minmax(0, 1fr); }

/* 字号回到与项目卡片同一量级（项目卡片：标题 14px / 正文 10.5px / 时间 10px） */
.pc-detail .project-explorer-tree header strong { font-size: 12px; }
.pc-detail .project-explorer-tree header small { font-size: 10.5px; }
.pc-detail .project-explorer-directory-main strong { font-size: 12px; font-weight: 700; }
.pc-detail .project-explorer-directory-main svg { width: 13px; height: 13px; }
.pc-detail .project-explorer-directory-row { min-height: 30px; }

.pc-detail .project-explorer-content-head strong { font-size: 12px; }
.pc-detail .project-explorer-content-head small { font-size: 10.5px; }

.pc-detail .project-explorer-canvas-card { padding: 10px; }
.pc-detail .project-explorer-canvas-copy strong {
  font-size: 12px;
  font-weight: 700;
}

.pc-detail .project-explorer-canvas-times small,
.pc-detail .project-explorer-canvas-times time {
  font-size: 10px;
  line-height: 1.55;
}

.pc-detail .project-explorer-canvas-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}


/* ============ 修复 3：抽屉头部重排 ============ */

/* 头部统一为单行：左侧标题（右列）或空（左列），右侧操作与目录行的操作按钮同侧 */
.pc-detail .pc-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  flex-wrap: nowrap;
}

.pc-detail .pc-detail-head-actions {
  flex: 1 1 auto;
  justify-content: flex-end;
  margin-left: auto;
}

.pc-detail .project-explorer-content-head .project-explorer-content-title {
  flex: 1 1 auto;
  min-width: 0;
}

.pc-detail .project-explorer-content-head .project-explorer-content-title strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 去掉此前为两行头部加的高度，让目录树获得更多空间 */
.pc-detail .project-explorer-tree > header { flex-wrap: nowrap; }
.pc-detail .project-explorer-directory-list { padding-top: 4px; }


/* ============ 修复 4：左列顶层项目标题 + 右列单行头部 ============ */

/* 左列头部：项目名一行，操作一行（内容因此整体下移一行） */
.pc-detail .project-explorer-tree > header.pc-detail-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 9px 10px 8px;
  border-bottom: 1px solid var(--soft-line);
}

.pc-detail .pc-detail-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-detail .pc-detail-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 11px;
  margin-right: 6px;
  background: var(--cyan);
  border-radius: 2px;
  vertical-align: -1px;
}

.pc-detail .project-explorer-tree > header .pc-detail-head-actions {
  justify-content: flex-end;
  margin-left: 0;
}

/* 右列头部：目录名与排序严格同一行 */
.pc-detail .project-explorer-content-head.pc-detail-head {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 8px;
  border-bottom: 1px solid var(--soft-line);
}

.pc-detail .project-explorer-content-head .project-explorer-head-actions {
  flex: 0 0 auto;
  margin-left: auto;
}


/* ============ 修复 5：抽屉默认收起 ============ */
.pc-detail .pc-detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pc-detail .pc-detail-title-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-detail .pc-detail-title .icon-button { margin-left: auto; flex: 0 0 auto; }


/* ============ 修复 6：封面按钮上移 + 视图标题与排序同行 ============ */

/* 全部项目页：标题与排序 / 新建项目同一行 */
.pc-view-head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: nowrap;
  padding: 0 0 12px;
}

.pc-view-head > div:first-child { min-width: 0; }

.pc-view-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.pc-view-head-actions .project-column-sort { margin-left: 0; }

/* 项目网格紧接标题行 */
.pc-projects { padding-top: 0; }
.pc-projects .pc-project-grid { padding-top: 0; }

/* 抽屉标题行：封面按钮与收起按钮都在右侧，封面在收起左侧 */
.pc-detail .pc-detail-title .icon-button {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.pc-detail .pc-detail-title .icon-button svg { width: 13px; height: 13px; }

/* 操作行不再包含封面按钮，保留靠右排列 */
.pc-detail .project-explorer-tree > header .pc-detail-head-actions { gap: 6px; }


/* ============ 修复 7：全部项目页标题栏对齐最近画布页 ============ */

/* 项目网格紧跟标题栏，间距统由 .center-section-head 提供（与最近画布页一致） */
.pc-projects { padding-top: 0; }
.pc-projects .pc-project-grid { padding-top: 0; }

.project-explorer-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.project-explorer-page > .center-section-head { flex: 0 0 auto; }

.project-explorer-page > .project-explorer-shell {
  min-height: 0;
  flex: 1 1 auto;
}

.project-list-controls { display: flex; align-items: center; gap: 8px; }
.project-list-controls .outline-button { flex: 0 0 auto; }


/* ============ 修复 8：标题栏右侧控件等高对齐 ============ */
:root {
  --pc-control-height: 30px;
}

.project-list-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 直接子控件（按钮、排序组）统一高度 */
.project-list-controls > * {
  height: var(--pc-control-height);
  min-height: var(--pc-control-height);
  max-height: var(--pc-control-height);
  box-sizing: border-box;
}

/* 排序下拉：容器与内部 select 同步高度，去掉额外纵向内边距 */
.project-list-controls .project-column-sort,
.project-list-controls .project-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--pc-control-height);
  padding: 0 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.project-list-controls .project-column-sort select,
.project-list-controls .project-sort-control select {
  height: calc(var(--pc-control-height) - 2px);
  min-height: 0;
  padding: 0 4px 0 0;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 11.5px;
  line-height: 1;
}

.project-list-controls .project-column-sort > svg,
.project-list-controls .project-sort-control > svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--muted);
}

/* 按钮（新建项目 / 批量处理）：与排序组等高 */
.project-list-controls .outline-button,
.project-list-controls .icon-button {
  height: var(--pc-control-height);
  min-height: var(--pc-control-height);
  padding: 0 12px;
  box-sizing: border-box;
}

.project-list-controls .icon-button { width: var(--pc-control-height); padding: 0; }

/* 图标与文字在按钮内垂直居中 */
.project-list-controls .outline-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-list-controls .outline-button > svg { width: 14px; height: 14px; flex: 0 0 auto; }


/* ============ 修复 9：画布卡片排版对齐项目卡片 ============ */

/* 隐藏左侧小图标（项目卡片没有图标位），改为纯文字卡片 */
.pc-canvas-grid .project-canvas-row .center-canvas-icon { display: none; }

.pc-canvas-grid .project-canvas-row .project-canvas-main {
  display: block;
  padding: 10px 11px 0;
}

.pc-canvas-grid .project-canvas-row .project-tree-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 标题：与项目卡片标题同字号同字重 */
.pc-canvas-grid .project-canvas-row .project-tree-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-canvas-grid .project-canvas-row .project-tree-copy .pc-canvas-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-canvas-grid .project-canvas-row .project-tree-copy .pc-canvas-time {
  overflow: hidden;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 编辑 / 删除按钮收到右下角，悬停才出现（与项目卡片一致） */
.pc-canvas-grid .project-canvas-row .center-canvas-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin: 6px 11px 11px;
  opacity: 0;
  transition: opacity .16s var(--ease);
}

.pc-canvas-grid .project-canvas-row:hover .center-canvas-actions { opacity: 1; }

/* 批量模式：勾选框仍在封面右上 */
.pc-canvas-grid .project-canvas-row .batch-check { top: 9px; right: 9px; }


/* ============ 修复 10：全部项目页排序下拉加宽 ============ */
.project-explorer-page .project-list-controls .project-column-sort {
  min-width: 132px;
  max-width: 200px;
  padding: 0 10px;
}

.project-explorer-page .project-list-controls .project-column-sort > svg {
  flex: 0 0 auto;
}

.project-explorer-page .project-list-controls .project-column-sort select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  /* 去掉系统箭头，避免与自绘图标重复占宽 */
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  padding-right: 0;
  text-overflow: ellipsis;
}

/* 「新建项目」按钮宽度不随排序框变化 */
.project-explorer-page .project-list-controls .outline-button { flex: 0 0 auto; }


/* ============ 修复 11：画布卡片复用项目卡片结构 ============ */
.pc-canvas-grid .pc-card {
  position: relative;
  cursor: pointer;
}

.pc-canvas-grid .pc-card.batch-row { cursor: default; }

.pc-canvas-grid .pc-card .pc-card-body h3 {
  margin: 0 0 4px;
}

.pc-canvas-grid .pc-card .pc-card-body p {
  margin: 0 0 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-canvas-grid .pc-card .pc-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.6;
}

.pc-canvas-grid .pc-card .pc-card-time {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-canvas-grid .pc-card .pc-card-ops {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity .16s var(--ease);
}

.pc-canvas-grid .pc-card:hover .pc-card-ops { opacity: 1; }

/* 批量勾选浮到封面右上 */
.pc-canvas-grid .pc-card .batch-check {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  margin: 0;
}

/* 旧结构残留元素（若还有）直接隐藏，避免重复显示 */
.pc-canvas-grid .pc-card .center-canvas-icon,
.pc-canvas-grid .pc-card .center-canvas-copy { display: none; }


/* ============ 修复 12：去掉重复封面 + 时间行统一 ============ */

/* 画布卡片已经自带 .pc-card-cover，关掉批次 A 留下的伪元素封面，避免上方多出一块 */
.pc-canvas-grid .project-canvas-row::before {
  content: none;
  display: none;
  aspect-ratio: auto;
}

/* 项目卡片时间行与画布卡片同样只放一行，不再被省略号截断 */
.pc-card .pc-card-time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   基础设置 · 总览页 —— 卡片网格优化（仅前端显示调整，不动任何逻辑）
   3 列 × 3 行：卡片宽 = 页面 1/3、高 = 页面 1/3；5 个分类各占一格
   只覆盖视觉参数，data-settings-section 等交互契约保持原样
   ========================================================================== */
.settings-overview-editorial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 12px;
}

.settings-overview-panel-comfy,
.settings-overview-panel-api,
.settings-overview-panel-storage,
.settings-overview-panel-custom,
.settings-overview-panel-network { grid-column: span 1; min-height: 0; }

.settings-overview-panel { min-height: 0; padding: 15px 17px 14px; border-radius: 11px; }
.settings-overview-panel-head { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding-bottom: 11px; }
.settings-overview-panel-icon { width: 34px; height: 34px; border-radius: 9px; }
.settings-overview-panel-icon svg { width: 17px; height: 17px; }
.settings-overview-panel-title em { font-size: 11.5px; }
.settings-overview-panel-title strong { font-size: 15.5px; }
.settings-overview-panel-total strong { font-size: 25px; }
.settings-overview-panel-total small { margin-top: 3px; font-size: 10.5px; }
.settings-overview-panel-body { display: flex; flex-direction: column; gap: 10px; padding-top: 11px; }
.settings-overview-section-label { margin-bottom: 0; }
.settings-overview-section-label strong { font-size: 12.5px; }
.settings-overview-section-label span { font-size: 10.5px; }

/* 工作流分类条 */
/* 工作流分类条：行间距 ×1.3（9 → 11.7px，用户要求） */
.settings-workflow-score-list { flex: 1 1 auto; display: flex; flex-direction: column; gap: 11.7px; justify-content: center; }
.settings-workflow-score { font-size: 11.5px; }
.settings-score-track { height: 8px; }

/* 前缀分布 */
.settings-overview-note-line { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 9px; border-top: 1px dashed var(--soft-line); }
.settings-overview-note-line span { padding: 3px 9px; font-size: 10.5px; }

/* 平台列表：排成两列，高度居中 */
.settings-platform-list { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; align-content: center; }
.settings-platform-line { padding: 7px 10px; border-radius: 7px; font-size: 11px; }
.settings-platform-copy strong { font-size: 11px; }
.settings-platform-copy em { font-size: 10px; }
.settings-model-types { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-model-type { padding: 4px 10px; font-size: 10.5px; }

/* 账户表 */
.settings-overview-user-table { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.settings-overview-user-head,
.settings-overview-user-row { padding: 8px 10px; font-size: 11px; }
.settings-overview-user-head { font-size: 10.5px; }

/* 画布行为：比例栈 */
.settings-ratio-stack { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.settings-ratio-row { font-size: 11.5px; }
.settings-ratio-track { height: 9px; }

/* ── 总览页字号统一（2026-09-21，用户要求）────────────────────────
   标题：统一 12px + 粗体（原来 15.5px / 12.5px 两套，看着不一）
   注释：统一 11px + 灰度 + 不加粗（原来 7–11.5px 参差，有些小到看不清） */
.settings-overview-panel-title strong,
.settings-overview-section-label strong { font-size: 12px; font-weight: 900; }

.settings-overview-panel-title em,
.settings-overview-panel-total small,
.settings-overview-section-label span,
.settings-overview-empty,
.settings-overview-note-line span,
.settings-overview-user-head,
.settings-overview-user-name small,
.settings-overview-user-storage small,
.settings-overview-user-storage code,
.settings-platform-copy em,
.settings-model-type,
.settings-workflow-score,
.settings-ratio-row {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* 右上角胶囊（进入 / 嵌入）与账户状态标签：只放大字号，
   保留它们自己的颜色语义 —— 那是"状态 / 操作"，不属于注释。 */
.settings-overview-panel-enter,
.settings-overview-user-status { font-size: 11px; }

/* 补漏：网络状态 / 两列事实表里的几处小字（同属总览页卡片） */
.settings-network-reading small,
.settings-compact-facts strong,
.settings-compact-facts span,
.settings-network-fact strong,
.settings-network-fact span { font-size: 11px; font-weight: 400; color: var(--muted); }
.settings-network-reading strong { font-size: 12px; font-weight: 900; }

/* ══════════════════════════════════════════════════════════════════
   字号统一 · 第 1 批：设置 · 其它页面（2026-09-21，用户要求）
   —— API 设置 / ComfyUI 设置 / 用户与存储 / 网络后台 / 自定义

   规则（与已定的「总览」「模型配置」保持一致）：
     标题   → 12px 粗体
     主文字 → 12px
     注释   → 11px 灰度不加粗
   只改字号 / 字重 / 颜色，**控件高度与间距一律不动**；原规则一行不改，
   全部是追加覆盖，需要回退时删掉本段即可。
   ══════════════════════════════════════════════════════════════════ */

/* ── 标题：12px 粗体 ── */
.provider-model-family-title,
.provider-model-category-head,
.provider-generation-probe-head,
.provider-route-settings-head,
.comfy-lora-title,
.comfy-lora-head,
.custom-tool-group-head,
.settings-storage-subsection,
.settings-storage-summary,
.storage-section-title,
.storage-inline-subhead,
.network-dashboard-card .settings-form-head h3 {
  font-size: 12px;
  font-weight: 900;
}

/* ── 主文字：12px ── */
.provider-setting-item,
.provider-picker-row,
.provider-route-model,
.provider-route-setting-row,
.provider-verify-row,
.provider-runninghub-main,
.provider-runninghub-summary,
.comfy-lora-name,
.comfy-lora-select,
.comfy-node-editor,
.comfy-node-brief,
.comfy-audio-input-copy,
.storage-directory-item,
.storage-mini-row,
.personal-storage-browser-row,
.personal-storage-folder-editor,
.network-plan-row,
.network-migration-item,
.network-usage-name,
.network-card-summary {
  font-size: 12px;
}

/* ── 注释：11px 灰度不加粗 ── */
.provider-health-detail,
.provider-health-preview,
.provider-probe-status,
.provider-generation-check,
.provider-head-controls,
.provider-picker-family-name,
.provider-model-full-name,
.provider-model-name-input,
.comfy-lora-empty,
.comfy-lora-settings-empty,
.comfy-lora-settings-row,
.comfy-lora-strength,
.comfy-input-preview-hint,
.comfy-run-warning,
.comfy-title-block,
.comfy-workflow-loading-state,
.comfy-seed-input-wrap,
.api-price-tooltip,
.api-run-hit,
.compact-api-resolution-control,
.knowledge-storage-safety-note,
.storage-directory-state,
.storage-mini-value,
.storage-path-label,
.storage-readonly-path-row,
.storage-section-side,
.personal-storage-note,
.personal-storage-browser-toolbar,
.personal-storage-browser-dialog,
.admin-storage-pool-copy,
.admin-storage-pool-create,
.admin-storage-pool-note,
.admin-storage-pool-status,
.network-usage-empty,
.network-usage-foot,
.network-usage-table {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* 第 1 批 · 补漏（上面清单里剩下的几个，同属设置其它页）
   注：.custom-tool-slots 不动 —— 它是「模型配置」页也用的容器，那边已定稿。 */
.provider-health-detail-grid,
.provider-key-state,
.settings-storage-summary-copy,
.admin-account-dialog,
.admin-private-kb-body,
.admin-private-kb-empty,
.admin-private-kb-manager {
  font-size: 11px;
}

/* 第 1 批 · 补：ComfyUI 工作流编辑器里「分类标题」与「自动保存」状态（用户点名）
   —— 只改字号，保留它们各自的颜色与底色（状态标签的颜色是有语义的）。 */
.workflow-category-button { font-size: 12px; }                    /* 文生图 / 图像编辑 / 高级编辑 / 视频 / 其它 */
.workflow-category-button strong { font-size: 11px; }             /* 按钮里的数量 */
.workflow-autosave-status { font-size: 11px; }                    /* 右上角「自动保存」状态 */
.workflow-category-title-row .workflow-title-select span { font-size: 11px; }

/* 第 1 批 · 补 2：API 设置页里剩下的几处小字（按"该页实际用到的类"逐个核对出来的）
   注：全局通用类（.empty / .eyebrow / .settings-form* / .settings-row / .settings-value /
       .run-button / .workflow-field-empty）一律不动 —— 它们影响全站。 */
.provider-model-capability,
.provider-model-family-resolutions,
.provider-model-resolution-inline,
.provider-health-error,
.provider-model-price-control,
.provider-model-alias-input,
.provider-param-panel,
.provider-picker-group {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* 第 1 批 · 补 3：自定义 / 用户与存储 / 网络后台 三页剩下的
   （同样按"页面实际用到的类"逐个核对出来的） */
.custom-mouse-grid,
.agent-write-root-actions,
.network-dashboard-card,
.network-migration-card,
.settings-agent-runtime-error,
.settings-agent-runtime-note,
.network-metric-grid,
.settings-agent-autostart-copy {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════════
   字号统一 · 第 2 批：知识库页面（2026-09-21，用户要求）
   规则与已定页面一致：主文字 12px · 注释 11px 灰度不加粗 · 胶囊 11px 保留色。
   只改字号/字重/颜色，控件高度与间距不动；原规则一行不改，可整段回退。
   ══════════════════════════════════════════════════════════════════ */

/* ── 一级主文字：12px ── */
.personal-kb-row strong,
.personal-kb-sub,
.personal-kb-viewtab,
.personal-kb-page-title,
.personal-kb-section-title,
.personal-kb-block > header strong,
.personal-kb-crumbs,
.personal-kb-pagepreview,
.knowledge-sidebar-project-copy,
.knowledge-chat-session-main,
.knowledge-file-preview-title,
.image-archive-head,
.generation-workflow-select,
.generation-category-select {
  font-size: 12px;
}

/* ── 注释：11px 灰度不加粗 ── */
.personal-kb-row small,
.personal-kb-page-side,
.personal-kb-page-time,
.personal-kb-page-tags,
.personal-kb-title-path,
.personal-kb-empty,
.personal-kb-tip,
.personal-kb-tag,
.personal-kb-chip,
.personal-kb-block > header span,
.personal-knowledge-head p,
.personal-platform-head,
.knowledge-sidebar-status,
.knowledge-sidebar-runtime-actions,
.knowledge-project-summary,
.knowledge-result-body,
.knowledge-result-score,
.knowledge-search-warning,
.knowledge-search-section-empty,
.knowledge-original-source-empty,
.knowledge-model-empty,
.knowledge-model-error,
.knowledge-model-channel,
.knowledge-model-service,
.knowledge-integration-status,
.knowledge-scope-note,
.knowledge-block-hint,
.knowledge-tree-empty,
.knowledge-header-notice,
.knowledge-review-row,
.knowledge-review-actions,
.knowledge-graph-summary,
.knowledge-graph-legend,
.knowledge-graph-search,
.knowledge-graph-neighbors,
.knowledge-graph-preview-empty,
.knowledge-graph-inspector-empty,
.knowledge-graph-inspector-actions,
.knowledge-graph-node-stats,
.knowledge-graph-markdown-preview,
.knowledge-note-chip,
.knowledge-note-export-note,
.knowledge-chat-session-empty,
.knowledge-chat-welcome,
.knowledge-chat-references,
.knowledge-chat-composer,
.knowledge-capture-destination,
.knowledge-capture-files,
.knowledge-capture-foot,
.knowledge-capture-title,
.knowledge-capture-dropzone,
.knowledge-file-image,
.knowledge-file-picker,
.knowledge-file-tree,
.knowledge-files-actions,
.knowledge-files-toolbar,
.knowledge-filter-new,
.knowledge-mineru-auto,
.knowledge-mineru-controls,
.knowledge-mineru-connector,
.knowledge-model-actions,
.knowledge-model-card,
.knowledge-model-routing,
.knowledge-project-select,
.knowledge-textarea-label,
.knowledge-switch,
.knowledge-pick-pop,
.knowledge-search-mode,
.knowledge-component-actions,
.knowledge-component-panel,
.image-archive-edit-grid,
.image-archive-actions,
.image-archive-draft,
.image-archive-draft-body,
.image-archive-dropzone,
.image-archive-empty,
.image-archive-search,
.image-archive-settings,
.image-archive-switches,
.image-archive-target,
.image-archive-file-strip,
.image-archive-inline-error,
.image-archive-local-preview,
.image-archive-result,
.admin-private-kb-body,
.admin-private-kb-empty,
.admin-private-kb-manager {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* 第 2 批 · 补 2：右侧「类型筛选栏」与标签云（用户点名：左侧列标题 12、右侧注释 11） */
.personal-kb-type { font-size: 11px; }        /* 类型胶囊本体（全部 168 / 实体 55…）：10 → 11 */
.personal-kb-type em { font-size: 10px; }     /* 胶囊里的数量：9 → 10 */
.personal-kb-tagbar { font-size: 11px; }      /* 标签云容器 */

/* ══════════════════════════════════════════════════════════════════
   第 2 批 · 全量补齐（知识库 + 笔记本 + 移动端 mk-*）
   —— 这份清单是**脚本从"知识库模块全部 js 的 class 属性"里穷举出来的**，
      不是人工挑的。清单里 8-10px 的类全部列在下面，改完后该模块
      **不再有 ≤10px 的文字**。
   ══════════════════════════════════════════════════════════════════ */
.personal-kb-addtext,
.personal-kb-block-row,
.knowledge-chat-sidebar,
.knowledge-filter-empty,
.knowledge-filter-note,
.knowledge-more-summary,
.knowledge-note-chip-empty,
.knowledge-note-tag,
.knowledge-note-chip-editable,
.knowledge-note-export-note,
.knowledge-result-index,
.knowledge-tag-chip,
.knowledge-tag-clearall,
.knowledge-alert,
.knowledge-search-form,
.knowledge-search-query,
.knowledge-tree-row,
.knowledge-view-form,
.knowledge-empty,
.knowledge-markdown-preview,
.knowledge-note-actions,
.knowledge-note-autosave,
.knowledge-note-block,
.knowledge-note-export-item,
.knowledge-note-field-tags,
.knowledge-note-image-menu,
.knowledge-note-leave-dialog,
.knowledge-note-live-preview,
.knowledge-note-meta,
.knowledge-note-preview-empty,
.knowledge-note-summary,
.knowledge-note-tag-box,
.knowledge-notebook-brand,
.knowledge-notebook-detail,
.knowledge-notebook-hint,
.knowledge-notebook-list,
.knowledge-notebook-list-actions,
.knowledge-related-row,
.knowledge-detail-kicker,
.knowledge-chat-user-content,
.knowledge-integration-grid,
.image-archive-panel,
.personal-kb-visibility,
.mk-back,
.mk-error,
.mk-note-field,
.mk-note-preview-body,
.mk-search,
.mk-hint,
.mk-row-copy,
.mk-section-label,
.mk-selects {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* 其中属于"一级主文字"的（列表项 / 区块标题 / 页面级文字）→ 12px */
.personal-kb-documents,
.personal-kb-edit,
.personal-kb-results,
.knowledge-chat-main,
.knowledge-chat-message,
.knowledge-notebook-filters,
.knowledge-file-preview,
.knowledge-search-section,
.knowledge-image-result,
.knowledge-graph-type-filter,
.knowledge-graph-inspector-head,
.knowledge-graph-preview-error,
.agent-window-title {
  font-size: 12px;
}

/* 按键绑定 / 网络状态 */
/* 两列事实表：列间距单独放大到 3 倍（21px），行间距保持 7px 不变，
   免得「模型配置」卡片里左右两列文字贴在一起。 */
.settings-compact-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 21px; row-gap: 7px; }
.settings-network-reading { padding: 10px 11px; font-size: 13px; }
.settings-network-facts { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.settings-network-fact { padding: 8px 10px; font-size: 11px; }

/* ── 知识库：wiki 式库内视图（内容 / 资料 / 图像 / 检索） ── */
.personal-kb-typebar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.personal-kb-type { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; color: #52696e; background: #fff; border: 1px solid var(--soft-line); border-radius: 999px; cursor: pointer; font-size: 10px; }
.personal-kb-type:hover { color: #1f4d52; border-color: #bcdcd8; }
.personal-kb-type.active { color: #fff; background: #2c6f74; border-color: #2c6f74; font-weight: 900; }
.personal-kb-type em { font-style: normal; font-size: 9px; opacity: .8; }
.personal-kb-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.personal-kb-content.has-preview { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); }
.personal-kb-contentlist { min-width: 0; max-height: 520px; overflow: auto; }
.personal-kb-pagelist { display: flex; flex-direction: column; gap: 2px; }
.personal-kb-page { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 10px; color: var(--ink); background: transparent; border: 0; border-left: 2px solid transparent; border-radius: 5px; cursor: pointer; text-align: left; }
/* 列表项内部：左边是标题 / 类型 / 标签，右边是时间（贴最右端） */
.personal-kb-page-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
/* 右侧：类型（笔记 / 概念…）+ 时间，都贴最右端；类型在时间前面 */
.personal-kb-page-side { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; padding-top: 1px; }
.personal-kb-page-side small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.personal-kb-page-time { flex: 0 0 auto; color: var(--muted); font-size: 11px; white-space: nowrap; }

/* 「平台工具」面板顶部：返回按钮 + 面板名（原来挤在一起） */
.personal-platform-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--soft-line); }
.personal-platform-head > strong { color: var(--ink); font-size: 12px; }
.personal-platform-head > span { color: var(--muted); font-size: 11px; }

/* 从「平台工具」解散出来的一级功能条目（知识问答 / 图谱 / 待核验 / 项目文件 / 集成设置） */
.personal-kb-top { margin-top: 2px; }
.personal-kb-top.active { color: #204d52; background: #e7f2f0; }

/* 左栏顶部：Wiki 运行时状态 + 内部设置入口（沿用原「运行时」卡片样式，收窄后放进新左栏） */
.personal-sidebar-runtime { margin: 0 0 9px; padding-bottom: 9px; border-bottom: 1px solid var(--soft-line); }
.personal-sidebar-runtime .knowledge-sidebar-runtime { margin: 0; padding: 9px; border: 1px solid var(--soft-line); border-radius: 8px; background: #fbfdfd; }
.personal-sidebar-runtime .knowledge-sidebar-project small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-sidebar-runtime .knowledge-sidebar-runtime-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.personal-sidebar-runtime .knowledge-sidebar-runtime-actions button { flex: 1 1 auto; }

/* 平台面板（项目文件 / 知识问答 / 图谱 / 待核验 / 集成设置）在右栏里**整屏铺满**：
   外层不滚动，滚动收在面板内部（原来是外层 + 内层都在滚 → 打开就滚动、铺不满）。 */
.personal-platform-body { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.personal-platform-body > .personal-platform-head { flex: 0 0 auto; margin-bottom: 8px; }
.personal-platform-body > *:not(.personal-platform-head) { flex: 1 1 auto; min-height: 0; }
/* 面板自带的 overflow:auto 保留 → 滚动发生在面板内部而不是整页 */
.personal-platform-body > .knowledge-panel { height: auto; }
.personal-platform-body .knowledge-files-panel { min-height: 0; }
.personal-platform-body .knowledge-graph-workspace { height: 100%; min-height: 320px; }
.personal-platform-body .knowledge-chat-panel { height: 100%; }

/* 验收修复（2026-09-20）：
   ① 平台面板所在的外层 main 带着 `padding: 16px` + `overflow: auto` → "面板明明撑满了，整页还在滚"。
      平台模式下把外层改成不滚、不留内边距 → 滚动只发生在面板内部，做到真整屏。
   ② 图片原来按 `calc(100vh - 300px)` 硬算高度，窗口一变就把图裁掉（外层还是 overflow:hidden）。
      改成相对容器自适应：高度链通了以后，图片会自己缩放到完整可见。 */
.personal-knowledge-main:has(> .personal-platform-body) { padding: 0; overflow: hidden; }
.personal-platform-body .knowledge-file-preview-body { min-height: 0; }
.personal-platform-body .knowledge-file-image,
.personal-platform-body .knowledge-file-image img { max-height: 100%; }

/* 验收修复 2（2026-09-20）—— 上一版没生效，原因如下，这次都绕开了：
   ① 外层 main 用的是 `:has()` 选择器，实际没命中 → 改用**显式类** `personal-platform-main`
      （写在模板的 <main> 上，100% 生效，不依赖 :has 支持度）。
   ② 预览区高度链缺一环：`.knowledge-file-preview`（app.css:5191）**没有设 flex**，
      于是图片容器拿不到确定高度，`max-height: 100%` 形同虚设 → 图片按原尺寸撑开，
      高度方向被 `overflow:hidden` 裁掉（宽度能自适应，是因为 max-width 起了作用）。
      现在补齐整条链：files-panel → preview → preview-body → image → img，
      全部 flex:1 1 auto; min-height:0，图片按 object-fit: contain 完整缩放进可视区。 */
.personal-platform-main { padding: 0; overflow: hidden; }
.personal-platform-body .knowledge-files-panel { min-height: 0; height: 100%; }
.personal-platform-body .knowledge-file-preview { flex: 1 1 auto; min-height: 0; }
.personal-platform-body .knowledge-file-preview-body { flex: 1 1 auto; min-height: 0; }
.personal-platform-body .knowledge-file-image { flex: 1 1 auto; min-height: 0; }
.personal-platform-body .knowledge-file-image img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* 「项目文件」右栏：图片 / PDF 站内预览（不再调系统看图软件） */
/* 图片：完整显示在预览区内（自适应缩放），预览区本身不出现滚动条 */
.knowledge-file-preview-body:has(.knowledge-file-image) { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.knowledge-file-image { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; }
.knowledge-file-image img { max-width: 100%; max-height: calc(100vh - 300px); object-fit: contain; background: #fff; border: 1px solid var(--soft-line); border-radius: 8px; }
.knowledge-file-image figcaption { color: var(--muted); font-size: 11px; word-break: break-all; }
.knowledge-file-frame { width: 100%; height: 72vh; min-height: 420px; border: 1px solid var(--soft-line); border-radius: 8px; overflow: hidden; background: #fff; }
.knowledge-file-frame iframe { width: 100%; height: 100%; border: 0; }

/* 「引用来源」卡片：标题与两个操作图标**同一行**（原来按钮独占一行），
   每个来源少占一行；图标带 title 悬停提示，功能不变。 */
.knowledge-chat-ref-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.knowledge-chat-ref-head > strong { flex: 1 1 auto; min-width: 0; }
.knowledge-chat-ref-tools { flex: 0 0 auto; display: flex; gap: 4px; }
.knowledge-chat-ref-tools > button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: transparent; border: 1px solid var(--soft-line); border-radius: 6px; color: var(--muted); cursor: pointer; }
.knowledge-chat-ref-tools > button:hover { color: var(--ink); background: #f1f7f6; }
.knowledge-chat-ref-tools svg { width: 13px; height: 13px; }

/* 引用来源：默认只显示标题，点标题才展开「路径 + type 元数据」（2026-09-21 用户要求）。
   正文行距见 .knowledge-chat-answer（1.72 × 1.2 = 2.06）。 */
.knowledge-chat-ref-head > strong[data-ref-toggle] { cursor: pointer; }
.knowledge-chat-ref-head > strong[data-ref-toggle]:hover { color: var(--cyan); }
/* 引用来源展开区（路径 + type 元数据）：必须可选中、可复制。
   点标题展开后，这段文字要能像普通文字一样刷选 —— 所以显式声明 user-select: text，
   并给 cursor: text 让鼠标形状正确。点击整行 = 一键复制（逻辑见 knowledge/index.js）。 */
.knowledge-chat-ref-body { margin-top: 3px; cursor: text; -webkit-user-select: text; user-select: text; }
.knowledge-chat-ref-body[hidden] { display: none; }
.knowledge-chat-ref-body > small,
.knowledge-chat-ref-body > p { user-select: text; -webkit-user-select: text; }
.knowledge-chat-ref-body > small:hover,
.knowledge-chat-ref-body > p:hover { color: #314c52; }

/* 验收修复 3（2026-09-20）—— 找到两个**真正的机制**（前两次猜偏了）：
   ① 图片高度被裁：`.knowledge-file-preview-body:has(.knowledge-file-image)`（上一处 7175 行）写成了
      `display: flex` 却**没写 `flex-direction`** → 默认是 **row（横向）**。于是
      `.knowledge-file-image` 的 `flex: 1 1 auto` 只吃到了**宽度**，高度仍按内容撑 →
      图片的 `max-height: 100%` 是相对"高度 auto 的父"算的 = **无效** → 图撑出去被 `overflow: hidden` 裁掉。
      修：容器改 **column**，图片容器才能真正拿到"剩余高度"。
   ② PDF 外围滚动条：`.knowledge-file-frame`（7179 行）写死 `height: 72vh`，比面板剩余高度高 →
      把面板撑出滚动条（你看到的那条"外围滚动条"其实就是面板自己的）。
      修：在平台外壳里改成占满剩余高度（flex + height:auto），旧面板保持原样不受影响。 */
.personal-platform-body .knowledge-file-preview-body { display: flex; flex-direction: column; min-height: 0; }
.knowledge-file-preview-body:has(.knowledge-file-image) { flex-direction: column; }
.personal-platform-body .knowledge-file-frame { flex: 1 1 auto; height: auto; min-height: 240px; }

/* 库内视图 tab（阶段 1.3）：在第 3 个 tab（内容）前面加一条分隔线，
   把"入口层（上传资料 / 归档图像）"与"使用层（内容 / 变更 / 检索）"在视觉上分开。
   tab 栏里只有这 5 个 button（见 index.js 的 .personal-kb-viewtabs），所以 nth-child(3) 正好是「内容」。 */
/* 分隔线改用 border-left —— ::before + absolute 那招实测看不见（被 tab 自身的背景/裁切吃掉了） */
.personal-kb-viewtabs > .personal-kb-viewtab:nth-child(3) { margin-left: 9px; padding-left: 10px; border-left: 1px solid #cdd9d8; }

/* 右栏标题第三行：这个库的磁盘路径（阶段 1.4）—— 用来一眼认出"是哪个库、在哪个位置"
   （左栏和下拉里的同名库可能分属不同用户或不同目录）。 */
.personal-kb-title-path { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; min-width: 0; color: var(--muted); font-size: 11px; }
.personal-kb-title-path svg { width: 11px; height: 11px; flex: 0 0 auto; opacity: .8; }
.personal-kb-title-path > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 阶段 1 验收修复：右栏标题行的操作按钮（状态 / 刷新 / 删除）不要换行 ——
   标题左侧多了"路径"一行之后，右侧那三个按钮被挤到了第二行。 */
.personal-knowledge-head-actions { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
.personal-knowledge-head > div:first-child { min-width: 0; }
.personal-kb-page:hover { background: #f1f7f6; }
.personal-kb-page.active { background: #e7f2f0; border-left-color: #2c6f74; }
.personal-kb-page-title { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-kb-page small { color: var(--muted); font-size: 11px; }
.personal-kb-pagepreview { min-width: 0; display: flex; flex-direction: column; padding: 12px 14px; background: #fbfdfd; border: 1px solid var(--soft-line); border-radius: 8px; }
.personal-kb-pagepreview > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid var(--soft-line); }
.personal-kb-pagepreview > header strong { display: block; color: var(--ink); font-size: 12px; }
.personal-kb-pagepreview > header small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; word-break: break-all; }
.personal-kb-pagepreview pre { flex: 1 1 auto; max-height: 460px; margin: 0; overflow: auto; color: #27474c; font-size: 11px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-family: inherit; }
@media (max-width: 1100px) {
  .personal-kb-content.has-preview { grid-template-columns: minmax(0, 1fr); }
  .personal-kb-pagepreview pre { max-height: 300px; }
}
/* 页面阅读视图：面包屑（库 / 类型 / 页面）+ Markdown 正文 */
.personal-kb-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; }
.personal-kb-crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-kb-crumbs strong { color: var(--ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-kb-crumbs svg { width: 11px; height: 11px; opacity: .55; flex: 0 0 auto; }
.personal-kb-reader-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.personal-kb-reader-tools small { max-width: 220px; color: var(--muted); font-size: 11px; word-break: break-all; }
.personal-kb-reader { max-height: none; overflow: auto; }

/* ── 知识库：高度锁定 + 标题行钉住，其余内部滚动 ── */
/* 高度直接锚定视口（不靠祖先链逐层传高度 —— 那条链里只要有一层是 auto，百分比高度就失效，
   页面高度就会跟着内容变）。锁定后切库 / 切视图页面高度恒定，库名那一行不再上下跳。 */
.knowledge-panel:has(> .personal-knowledge-console) { overflow: hidden; min-height: 0; }
.personal-knowledge-console { height: calc(100vh - 196px); min-height: 460px; }
/* 2026-10-06（用户报「知识库下方一大片空白」）：`100vh - 196px` 是给**主界面顶栏**预留的，
   而独立窗口（standalone）里没有顶栏 —— 于是多减 ~182px，底下空一片。
   standalone 下改成撑满父容器（`.page-view-body` 本身就是满高 flex）。 */
.knowledge-standalone-view .personal-knowledge-console,
.standalone-view .personal-knowledge-console { height: 100%; min-height: 0; }
/* 右栏：标题栏与内容分开 —— 标题栏不参与滚动，只有下方 .personal-knowledge-body 滚动，
   所以滚动条也只出现在标题栏下方，不会从标题栏上穿过。 */
.personal-knowledge-main { display: flex; flex-direction: column; overflow: hidden; }
.personal-knowledge-head { flex: 0 0 auto; }
.personal-knowledge-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* 内容视图：类型内搜索 + 标签筛选 */
.personal-kb-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.personal-kb-query { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 11px; }
.personal-kb-tagbar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.personal-kb-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; color: #47697a; background: #eef4f8; border: 1px solid #dbe6ef; border-radius: 999px; cursor: pointer; font-size: 9px; }
.personal-kb-tag:hover { color: #1f4d52; border-color: #bcdcd8; }
.personal-kb-tag.active { color: #fff; background: #2c6f74; border-color: #2c6f74; font-weight: 900; }
.personal-kb-tag em { font-style: normal; opacity: .75; font-size: 11px; }
.personal-kb-page-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.personal-kb-page-tags em { padding: 1px 6px; color: #54707b; background: #f0f5f7; border-radius: 999px; font-size: 11px; font-style: normal; }
.personal-kb-reader-tags { margin: 0 0 10px; }
.personal-kb-contentlist { max-height: none; }

/* 类型按钮的含义提示：默认隐藏，鼠标悬浮在按钮上就显示（向下弹出，避免被容器裁掉） */
.personal-kb-type { position: relative; }
.personal-kb-type[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% + 7px); bottom: auto; transform: translateX(-50%);
  z-index: 30; width: max-content; max-width: 260px; padding: 6px 9px;
  color: #fff; background: #20474d; border-radius: 6px;
  font-size: 9px; font-weight: 400; line-height: 1.55; text-align: left; white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); pointer-events: none;
}
.personal-kb-type[data-tip]:hover::before {
  content: ''; position: absolute; left: 50%; top: 100%; bottom: auto; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: #20474d;
}

/* 库标题栏右上角：可见性 + 刷新 + 删除（与标题行同高；按钮为 52 的 80%）
   注意：`.personal-knowledge-head span`（3245 行）会给标题栏里所有 span 上样式，
   所以要带 `.personal-knowledge-head` 前缀把优先级提上去，否则字号/颜色不生效。 */
.personal-knowledge-head-actions { display: flex; align-items: center; align-self: center; gap: 3px; flex: 0 0 auto; }
.personal-knowledge-head-actions .icon-button { width: 34px; height: 34px; border-radius: 6px; }
.personal-knowledge-head-actions .icon-button svg { width: 15px; height: 15px; }
.personal-knowledge-head .personal-kb-visibility { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 4px; color: #47697a; background: none; border: 0; border-radius: 0; box-shadow: none; }
.personal-knowledge-head .personal-kb-visibility span,
.personal-knowledge-head .personal-kb-visibility strong { color: #47697a; background: none; font-size: 11px; font-weight: 700; }
.personal-knowledge-head .personal-kb-visibility svg { width: 15px; height: 15px; }
.icon-button.danger { color: #b3261e; }
.icon-button.danger:hover { color: #8c1d17; background: #fdf0ef; }
/* 通用悬浮提示（默认隐藏；右对齐 + 向左展开，避免超出页面右边界） */
.personal-kb-tip { position: relative; }
.personal-kb-tip[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: auto; right: 0; top: calc(100% + 8px); bottom: auto; transform: none;
  z-index: 30; width: max-content; max-width: 320px; padding: 8px 11px;
  color: #fff; background: #20474d; border-radius: 6px;
  font-size: 10px; font-weight: 400; line-height: 1.6; text-align: left; white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); pointer-events: none;
}
.personal-kb-tip[data-tip]:hover::before {
  content: ''; position: absolute; left: auto; right: 18px; top: 100%; bottom: auto; transform: none;
  border: 6px solid transparent; border-bottom-color: #20474d;
}

/* 「内容」阅读区右上角的「共享」按钮 */
.personal-kb-share { height: 27px; padding: 0 10px; font-size: 11px; }
.personal-kb-share svg { width: 12px; height: 12px; }
.personal-kb-share.active { color: #fff; background: #2c6f74; border-color: #2c6f74; font-weight: 900; }
/* 「共享」频道里源已失效的条目 */
.personal-kb-page.is-missing .personal-kb-page-title { color: var(--muted); text-decoration: line-through; }

/* 左栏三节标题统一样式：笔记本 / 新建知识库 / 我的知识库（含公共、待审）完全同款 */
.personal-knowledge-sidebar .personal-kb-section-title {
  display: flex; align-items: center; gap: 6px;
  width: 100%; min-height: 0; margin: 0; padding: 0;
  color: var(--muted); background: none; border: 0; border-radius: 0;
  font-family: inherit; font-size: 9px; font-weight: 900; letter-spacing: .02em; text-align: left; cursor: pointer;
}
.personal-knowledge-sidebar .personal-kb-section-title svg { width: 12px; height: 12px; flex: 0 0 auto; }
.personal-knowledge-sidebar .personal-kb-section-title:hover { color: #204d52; }
/* 三节之间的统一行距 */
.personal-knowledge-sidebar > .personal-kb-section-title,
.personal-knowledge-sidebar > .personal-knowledge-create,
.personal-knowledge-sidebar > section { margin-top: 14px; }
.personal-knowledge-sidebar > .personal-kb-section-title:first-child { margin-top: 0; }
.personal-knowledge-create > strong.personal-kb-section-title { margin-bottom: 2px; }

/* 左栏「共享知识库」节的链接行（正常是链接行 + 就地取消共享按钮） */
.personal-shared-list { display: flex; flex-direction: column; gap: 2px; }
.personal-shared-row { display: flex; align-items: center; gap: 2px; }
.personal-shared-row > .personal-kb-row { flex: 1 1 auto; min-width: 0; }
.personal-shared-row > .icon-button { flex: 0 0 auto; opacity: .5; }
.personal-shared-row > .icon-button:hover { opacity: 1; color: #b3261e; background: #fdf0ef; }
.personal-shared-row.active > .personal-kb-row { color: #204d52; background: #e7f2f0; }

/* 「共享知识库」里的分组标题：我的共享 / 他人共享 */
.personal-shared-group { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 8px 0 2px; padding-left: 2px; color: var(--muted); font-size: 9px; font-weight: 700; }
.personal-shared-group:first-child { margin-top: 2px; }
.personal-shared-group em { font-style: normal; opacity: .7; }
.personal-shared-group-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 左栏节标题：字号统一为 12px（与一级列表项一致，2026-09-21 用户要求），点击可折叠 */
.personal-knowledge-sidebar .personal-kb-section-title { font-size: 12px; }
.personal-kb-section-title em { margin-left: auto; font-style: normal; font-weight: 700; opacity: .65; }
.personal-kb-section-title svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .8; }
.personal-kb-section-body { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; }
.personal-kb-section.is-collapsed > .personal-kb-section-title { color: var(--muted); }
/* 一级分类标题与它下面第一个二级条目之间，留出与「我的共享 ↔ 他人共享」相同的行距 */
.personal-kb-section > .personal-kb-section-title { margin-bottom: 6px; }

/* 「内容」列表项：标题行（标题 + 已共享小图标） */
.personal-kb-page-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.personal-kb-page-head > .personal-kb-page-title { flex: 1 1 auto; min-width: 0; }
.personal-kb-shared-flag { width: 11px; height: 11px; flex: 0 0 auto; color: #2c6f74; }

/* 「公共知识库」下的二级条目（我的临时共享 / 他人临时共享 / 待审知识库）：
   行高 / 内边距 / 字号 / 图标尺寸与「知识库条目」完全一致，同级同格式。 */
.personal-kb-group-head { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 28px; padding: 3px 7px; }
.personal-kb-group-head svg { width: 13px; height: 13px; }
.personal-kb-group-head strong { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: visible; text-overflow: clip; }
.personal-kb-group-head em { font-style: normal; font-size: 11px; color: var(--muted); }
/* 分组内的页面链接再缩进一层（三级） */
.personal-shared-body { margin: 0 0 2px 0; padding-left: 12px; border-left: 1px solid var(--soft-line); }

/* Markdown 表格（wiki 页面里的对照表 / 参数表） */
.knowledge-markdown-table { margin: 8px 0; overflow-x: auto; }
.knowledge-markdown-table table { width: 100%; border-collapse: collapse; font-size: 11px; }
.knowledge-markdown-table th, .knowledge-markdown-table td { padding: 6px 9px; border: 1px solid var(--soft-line); text-align: left; vertical-align: top; line-height: 1.6; }
.knowledge-markdown-table th { color: var(--ink); background: #f2f7f6; font-weight: 900; }
.knowledge-markdown-table tbody tr:nth-child(even) { background: #fafcfc; }

/* 「内容」视图：搜索框（选中的标签以 chip 形式在框内，框里还能继续打字） */
.personal-kb-searchbox { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; padding: 4px 8px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.personal-kb-searchbox .personal-kb-query { flex: 1 1 120px; min-width: 90px; height: 24px; padding: 0; color: var(--ink); background: none; border: 0; outline: none; font-size: 11px; }
.personal-kb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px 3px 8px; color: #fff; background: #2c6f74; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.personal-kb-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; color: #fff; background: rgba(255, 255, 255, .22); border: 0; border-radius: 50%; cursor: pointer; }
.personal-kb-chip-remove:hover { background: rgba(255, 255, 255, .42); }
.personal-kb-chip-remove svg { width: 9px; height: 9px; }

/* ══════════════════════════════════════════════════════════════════
   第 2 批 · 补 5：笔记本左栏（用户反馈"进入后左侧列表字体还是小"）
   —— 这一套原本就是 11px，与知识库主页面的 12px 不一致。
      统一：列表项 / 输入框 → 12px；数字与说明文字 → 11px。
   ══════════════════════════════════════════════════════════════════ */
.knowledge-notebook-brand strong,
.knowledge-notebook-filters nav button,
.knowledge-notebook-trash-toggle,
.knowledge-notebook-list > header strong,
.knowledge-notebook-filters > input,
.knowledge-notebook-filters > select {
  font-size: 12px;
}

.knowledge-notebook-brand small,
.knowledge-notebook-filters nav button small,
.knowledge-notebook-trash-toggle small,
.knowledge-notebook-list > header span,
.knowledge-notebook-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* ===== 图谱工具栏字号统一（2026-09-21 用户要求） =====
   同一行原来混着 8px（类型计数）/ 9px（类型名、搜索框）/ 12px（左侧「170 节点」的数字），
   看起来忽大忽小。这里统一成与左侧一致：文字 9px、计数 12px（与左侧数字同级）。
   只覆盖图谱工具栏，不动其它页面。 */
.knowledge-graph-toolbar .knowledge-graph-type-filter button {
  font-size: 9px;
}
.knowledge-graph-toolbar .knowledge-graph-type-filter button small {
  font-size: 12px;
  font-weight: 700;
}
.knowledge-graph-toolbar .knowledge-graph-search input {
  font-size: 9px;
}

/* ===== 「待核验」标题栏固定 + 内容区独立滚动（2026-09-21 用户要求） =====
   要求：范围项（`全部 || 测试01 || 笔记本`）排到标题栏「待核验」后面；
   滚动时**标题栏不动**，滚动只发生在标题栏下方 —— 所以由 `.personal-platform-content`
   单独承担滚动，外层 `.personal-platform-main` 不再滚（原来整个 main 一起滚，标题栏会被带走）。 */
.personal-platform-main {
  overflow: hidden;
}
.personal-platform-body {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.personal-platform-head {
  flex: 0 0 auto;
  flex-wrap: wrap;          /* 库多的时候范围项自动换行，不撑破标题栏 */
  align-items: baseline;
}
.personal-platform-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* ===== 问答「引用来源」列表紧凑化（2026-09-21 用户要求） =====
   ① 编号与标题同一行对齐、标题行与隐藏内容之间的间距收窄；
   ③ 两个图标（查看知识页 / 用默认软件打开）整体左移一点，并在所有条目间上下对齐；
   ④ 分数给独立占位宽度（不再随数字长短漂移），字号 9px。 */
.knowledge-chat-references > article {
  align-items: start;      /* 编号不再相对"整条"居中，改为与标题行对齐 */
  gap: 6px;
}
.knowledge-chat-references > article > span {
  align-self: start;
  /* 标题行被右侧 26px 的图标撑成 26px 高、文字在其中垂直居中（≈13px 处）；
     13px 的序号块再下移 6px，两者中线才真正齐平（上次给 2px，偏高了）。 */
  margin-top: 6px;
}
.knowledge-chat-ref-head {
  align-items: center;     /* 标题与右侧两个图标垂直对齐 */
}
.knowledge-chat-ref-tools {
  margin-right: 8px;       /* 图标组整体左移，不贴住右侧分数 */
}
.knowledge-chat-ref-body {
  margin-top: 1px;         /* 原 3px → 收窄 */
}
.knowledge-chat-references > article > em {
  width: 46px;             /* 独立占位宽度：图标位置不随数字长短变化 */
  flex: 0 0 auto;
  text-align: right;
  font-size: 9px;
}

/* ===== 「资料库」面板（知识库阶段 4 · 原件分类） =====
   左边分类树（含「待整理」）+ 右边原件列表（勾选 + 「归类到…」）。
   只写元数据，界面风格与「项目文件」「上传资料」保持一致（同样用内联之外的 class，
   好让主题变量 --ink/--line/--soft-line 统一生效）。 */
.asset-catalog-panel { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.asset-catalog-body { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 10px; }
.asset-catalog-side { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #f7faf9; border: 1px solid var(--soft-line); border-radius: 8px; }
.asset-catalog-side > header { display: flex; flex-direction: column; gap: 2px; }
.asset-catalog-side > header strong { color: var(--ink); font-size: 12px; font-weight: 900; }
.asset-catalog-side > header span { color: var(--muted); font-size: 9px; }
.asset-catalog-tree { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.asset-catalog-node { min-height: 27px; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 0 8px 0 calc(8px + var(--catalog-indent, 0px)); color: #4a6267; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 11px; text-align: left; }
.asset-catalog-node:hover { background: #e9f4f2; }
.asset-catalog-node.active { color: #ffffff; background: #243437; font-weight: 700; }
.asset-catalog-node.active em { color: rgba(255, 255, 255, .75); }
.asset-catalog-node svg { width: 13px; height: 13px; }
.asset-catalog-node span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-catalog-node em { color: var(--muted); font-style: normal; font-size: 10px; }
.asset-catalog-side > footer { display: flex; flex-wrap: wrap; gap: 6px; }
.asset-catalog-side > footer .outline-button { flex: 1 1 auto; min-height: 26px; font-size: 10px; }
.asset-catalog-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 8px; }
.asset-catalog-toolbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.asset-catalog-selected { color: var(--muted); font-size: 11px; }
.asset-catalog-selected strong { color: var(--ink); }
.asset-catalog-target { display: inline-flex; align-items: center; gap: 6px; color: #4a6267; font-size: 11px; }
.asset-catalog-target select { height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 11px; }
.asset-catalog-spacer { flex: 1 1 auto; }
.asset-catalog-toolbar .outline-button, .asset-catalog-toolbar .run-button { min-height: 28px; font-size: 11px; }
.asset-catalog-list { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.asset-catalog-doc { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--soft-line); border-radius: 6px; cursor: pointer; }
.asset-catalog-doc:hover { background: #f8fbfa; border-color: #cfe3e0; }
.asset-catalog-doc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.asset-catalog-doc-main strong { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.asset-catalog-doc-main small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.asset-catalog-doc > em { color: var(--muted); font-style: normal; font-size: 10px; white-space: nowrap; }
.asset-catalog-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 11px; text-align: center; }
.asset-catalog-empty.is-error { color: #b42318; }
.asset-catalog-empty svg { width: 22px; height: 22px; color: var(--cyan); }
.asset-catalog-more { flex: 0 0 auto; color: var(--muted); font-size: 10px; }

/* ---- 「资料库」重设计（2026-09-21 用户要求） ---- */
/* ① 左列（分类）与页面**同高**，且**始终撑满**：
   用户反馈"空分类时面板只有内容那么矮、和'有资料'时长得不一样"。
   根因：`.personal-platform-content` 是 block 容器，面板上的 `flex: 1 1 auto` 在它里面
   **不生效**，于是高度只由内容决定。这里用 `height: 100%` 明确撑满（该父级有确定高度）。 */
.asset-catalog-panel { height: 100%; box-sizing: border-box; }
.asset-catalog-body { height: 100%; align-items: stretch; }
.asset-catalog-body > .asset-catalog-side,
.asset-catalog-body > .asset-catalog-main { height: 100%; }
/* ② 分类树行结构：缩进 + 展开箭头 + 分类本体（多级分类用箭头展开/收起） */
.asset-catalog-row { display: grid; grid-template-columns: auto 16px minmax(0, 1fr); align-items: center; gap: 2px; }
.asset-catalog-indent { width: var(--catalog-indent, 0px); }
.asset-catalog-toggle { width: 16px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #7f9093; background: none; border: 0; cursor: pointer; }
.asset-catalog-toggle:hover { color: var(--ink); }
.asset-catalog-toggle svg { width: 12px; height: 12px; }
.asset-catalog-toggle-spacer { width: 16px; height: 1px; }
/* 缩进已经由 .asset-catalog-indent 承担，本体不再自带左内边距 */
.asset-catalog-tree .asset-catalog-node { padding: 0 8px; }
/* ③ 原件列表行：勾选区 / 库名 / 两个动作图标（打开原件 · 打开所在目录） */
.asset-catalog-doc { grid-template-columns: minmax(0, 1fr) auto auto; }
.asset-catalog-doc-pick { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 8px; cursor: pointer; }
.asset-catalog-doc-kb { color: var(--muted); font-style: normal; font-size: 10px; white-space: nowrap; }
.asset-catalog-doc-actions { display: inline-flex; align-items: center; gap: 4px; }
.asset-catalog-doc-actions .icon-button { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; color: #60777c; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 6px; }
.asset-catalog-doc-actions .icon-button:hover { color: #176d73; border-color: #a9cdca; background: #eff8f7; }
.asset-catalog-doc-actions .icon-button svg { width: 13px; height: 13px; }
/* ④ 工具条：「应用」与左侧「归类到」下拉**等高**，图标与文字都不溢出 */
.asset-catalog-toolbar .asset-catalog-target select { height: 28px; box-sizing: border-box; }
.asset-catalog-toolbar .run-button,
.asset-catalog-toolbar .outline-button { height: 28px; min-height: 28px; padding: 0 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
.asset-catalog-toolbar .run-button svg,
.asset-catalog-toolbar .outline-button svg { width: 13px; height: 13px; flex: 0 0 13px; }

/* ---- 私人笔记本：铺满整页 + 返回按钮不被拉宽（2026-09-21 用户要求） ---- */
/* ① 去掉外层那圈 padding：它让笔记本面板四周留白，看起来比知识库页面小一圈、视觉不齐。
      `.knowledge-notebook` 自带 border / border-radius / 内边距，整页显示时把外框抹平即可。 */
.personal-knowledge-notebook-main { padding: 0; }
.personal-knowledge-notebook-main > .knowledge-notebook { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
/* ② 「返回知识库」已挪进**第一列**（见 `renderNotebookFilters` 的 `showBackButton`）：
      不再需要"防止被 flex 拉伸"那套；这里只让它按内容宽度、与左列其它内容有正常间距。
      它在左列容器里，底色自然与左列一致。 */
.knowledge-notebook-back { width: fit-content; max-width: 100%; margin: 0 0 14px; }

/* ===== 「图片检索」面板（2026-09-21 用户要求：按打标内容/标签/关键字/名称/文件名跨库搜图） ===== */
.image-search-panel { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.image-search-toolbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.image-search-field { display: flex; flex-direction: column; gap: 4px; }
.image-search-field.grow { flex: 1 1 260px; min-width: 200px; }
.image-search-field > span { color: var(--muted); font-size: 10px; }
.image-search-field input,
.image-search-field select { height: 30px; box-sizing: border-box; padding: 0 10px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; }
.image-search-field.grow input { width: 100%; }
.image-search-toolbar .run-button,
.image-search-toolbar .outline-button { height: 30px; min-height: 30px; box-sizing: border-box; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.image-search-toolbar .run-button svg,
.image-search-toolbar .outline-button svg { width: 13px; height: 13px; flex: 0 0 13px; }
.image-search-summary { flex: 0 0 auto; min-height: 16px; color: var(--muted); font-size: 11px; }
.image-search-summary strong { color: var(--ink); }
.image-search-grid { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; align-content: start; }
.image-search-card { min-width: 0; display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--soft-line); border-radius: 8px; overflow: hidden; }
.image-search-card:hover { border-color: #cfe3e0; }
.image-search-thumb { display: block; width: 100%; height: 132px; padding: 0; background: #f3f7f6; border: 0; border-bottom: 1px solid var(--soft-line); cursor: zoom-in; }
.image-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-search-thumb.is-empty { display: grid; place-items: center; color: #9db0b3; }
.image-search-thumb.is-empty svg { width: 22px; height: 22px; }
.image-search-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 9px 9px; }
.image-search-card-body strong { overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.image-search-file { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.image-search-card-body p { margin: 0; color: #5c7478; font-size: 10px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.image-search-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.image-search-tags em { padding: 1px 6px; color: #47697a; background: #eef4f8; border-radius: 9px; font-size: 9px; font-style: normal; }
.image-search-classes { display: flex; flex-wrap: wrap; gap: 3px; color: var(--muted); font-size: 9px; }
.image-search-card-body footer { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 10px; }
.image-search-card-body footer span { display: inline-flex; align-items: center; gap: 3px; }
.image-search-card-body footer svg { width: 11px; height: 11px; }
.image-search-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 11px; text-align: center; }
.image-search-empty strong { color: var(--ink); font-size: 12px; }
.image-search-empty.is-error { color: #b42318; }
.image-search-empty svg { width: 24px; height: 24px; color: var(--cyan); }
/* 点缩略图看大图的简易灯箱 */
.knowledge-media-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(16, 32, 36, .72); }
.knowledge-media-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 18px 48px rgba(0, 0, 0, .4); }
.knowledge-media-lightbox button { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; display: grid; place-items: center; color: #ffffff; background: rgba(255, 255, 255, .16); border: 0; border-radius: 50%; cursor: pointer; }
.knowledge-media-lightbox button:hover { background: rgba(255, 255, 255, .3); }

/* 「资料库」工具条最左的筛选框（2026-09-21 用户要求：按源文件名筛原件） */
.asset-catalog-filter { min-width: 0; max-width: 280px; height: 26px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; color: var(--muted); background: #ffffff; border: 1px solid var(--line); border-radius: 13px; }
.asset-catalog-filter > svg { width: 12px; height: 12px; flex: 0 0 12px; }
.asset-catalog-filter > input { min-width: 0; flex: 1 1 auto; height: 24px; padding: 0; color: var(--ink); background: transparent; border: 0; outline: none; font: inherit; font-size: 11px; }
.asset-catalog-filter > em { flex: 0 0 auto; color: var(--muted); font-size: 9px; font-style: normal; }

/* 2026-09-23：分类树——二级行带操作按钮（原来只有名字与数量），以及删除按钮配色 */
.cap-tree-row.is-child { display: flex; align-items: center; gap: 1px; }
/* 2026-09-23：分类计数统一放到最右侧、固定宽度并右对齐（按钮在其左侧，悬浮才浮现）。 */
.cap-tree-count { flex: 0 0 auto; min-width: 26px; margin-left: 6px; padding-right: 2px; color: var(--muted); font-size: 11px; font-style: normal; text-align: right; }
.cap-tree-ops .icon-button.tiny { width: 17px; min-width: 17px; height: 17px; padding: 0; }
.cap-tree-ops .icon-button.tiny svg { width: 11px; height: 11px; }
.cap-tree-row.is-child .cap-tree-ops { flex: 0 0 auto; }
.cap-tree-row.is-child .cap-tree-node.is-child { flex: 1 1 auto; min-width: 0; }
.cap-tree-ops .icon-button.is-danger { color: #9a3e3e; }
.cap-tree-ops .icon-button.is-danger:hover { background: #fff0ef; }