包起来，自动靠右排成一组。
- flex 父级：margin-left:auto 吃掉左侧剩余空间
- grid 父级（如 assets 10 列对齐）：页面再补 grid-column 落位即可，不会冲突
- 窄窗：白名单不参与换行/收缩，让外层 cas-filter-outer 的 overflow-x:auto 接管横滚
- 内容溢出时（如 profile 11 个 filter）：position:sticky right:0 让 actions 始终贴
cas-filter-outer 右边可见，filters 从下方滚过去；white 背景遮住下方滚动内容，
左缘 ::before 渐变（透明→白）告诉用户"左侧有更多内容可滚" */
.cas-filter-bar > .cas-filter-right,
.filter-bar > .cas-filter-right,
.cas-filter-bar > .filter-right,
.filter-bar > .filter-right {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
flex-wrap: nowrap;
justify-content: flex-end;
white-space: nowrap;
min-width: max-content;
position: sticky;
right: 0;
background: var(--cas-filter-right-bg, var(--cas-bg-white));
padding-left: 12px;
z-index: 1;
}
.cas-filter-bar > .cas-filter-right::before,
.filter-bar > .cas-filter-right::before,
.cas-filter-bar > .filter-right::before,
.filter-bar > .filter-right::before {
content: '';
position: absolute;
left: -24px;
top: 0;
bottom: 0;
width: 24px;
background: linear-gradient(to right, transparent, var(--cas-filter-right-bg, var(--cas-bg-white)));
pointer-events: none;
}
/* ::after：向上延伸覆盖多行筛选栏（如 assets）所有行的右侧区域。
单行场景：::after 从 sticky 顶上去 100vh，但 cas-filter-outer overflow-y:hidden 会把它
裁到 row 高度（即上方无可见内容，::after 被裁成 0），无副作用。
多行场景：::after 延伸覆盖上方所有 row 的右侧，与 sticky 形成完整的右侧"盖子"，
同样保持左缘 24px 渐变与 sticky 本体的 ::before 视觉对齐。 */
.cas-filter-bar > .cas-filter-right::after,
.filter-bar > .cas-filter-right::after,
.cas-filter-bar > .filter-right::after,
.filter-bar > .filter-right::after {
content: '';
position: absolute;
bottom: 100%;
left: -24px;
right: 0;
height: 100vh;
background: linear-gradient(
to right,
transparent 0,
var(--cas-filter-right-bg, var(--cas-bg-white)) 24px
);
pointer-events: none;
}
/* 右对齐组内每个直系子元素也禁止收缩 / 自身换行 */
.cas-filter-bar > .cas-filter-right > *,
.filter-bar > .cas-filter-right > *,
.cas-filter-bar > .filter-right > *,
.filter-bar > .filter-right > * {
flex-shrink: 0;
white-space: nowrap;
}
/* ── filter-outer: 全站统一筛选栏外壳（单行/多行通用） ──
* · 上 padding 0、下 padding 10（与表格/卡片间距 10）
* · 子 .cas-filter-bar flex column + 行间 5px；align-items flex-start 让子保持自然宽度
* · 整体横向滚动接管（多行同步滚），隐藏滚动条
* · cas-tabs 紧跟 outer 时上移 10 → 净 tab→filter 间距 = 10
* · 在 tab-content 内时由 tab-content 自己 margin-top:-10 解决（避免被 overflow:hidden 裁剪）
*/
.cas-filter-outer {
padding: 0 0 10px 0;
flex-shrink: 0;
display: flex; flex-direction: column; gap: 5px;
align-items: flex-start; /* 子不 stretch，filter-bar 自然宽度 → outer 整体可横滚 */
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
.cas-filter-outer::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge 隐藏滚动条 */
/* align-items:flex-start 让子行不拉伸；width:100% 补回全宽，使 1fr / margin-left:auto 正常右对齐 */
.cas-filter-outer > .cas-filter-bar,
.cas-filter-outer > .filter-bar { width: 100%; }
/* tabs 与 outer 是相邻兄弟（无 tab-content 包裹场景） */
.cas-tabs + .cas-filter-outer,
.page-tabs + .cas-filter-outer,
.tabs + .cas-filter-outer { margin-top: -10px; }
/* Wrapper 场景 fallback（v=27）：当 .cas-tabs 被装在容器（如 system 管理后台的
#sys-sticky-top）里，而 .cas-filter-outer 又在相邻 sibling 容器（#tab-{slug}）
的首位时，上面的相邻兄弟选择器够不着，需要把后者整体上移 10px。
⚠️ -10 必须加在 wrapper（如 #tab-{slug}）本身，不能加在 .cas-filter-outer 上：
wrapper 通常带 overflow-y:auto（列表页高度锁定 pattern），加在子元素上会被裁剪
掉负 margin 区域 → 筛选栏顶部一半被吃掉（base v=26 已踩过）。
:has(> .cas-tabs) 锁定"直接包 .cas-tabs"的 wrapper；+ *:has(> .cas-filter-outer:first-child)
锁定相邻 sibling 且其首位是 .cas-filter-outer 的目标 wrapper。 */
:has(> .cas-tabs) + *:has(> .cas-filter-outer:first-child),
:has(> .page-tabs) + *:has(> .cas-filter-outer:first-child),
:has(> .tabs) + *:has(> .cas-filter-outer:first-child) { margin-top: -10px; }
/* =============================================================================
* 13. CARD / PANEL
* · 单卡 padding 24，圆角 12 (--cas-radius-xl)
* · 垂直堆叠卡片：相邻 margin-top 20
* · 横向并排卡片网格：用 var(--cas-gap-card) (= 12px)
* 适用场景：projects-grid / info-cards-inner / prep-grid / asset-grid
* ============================================================================= */
.cas-card, .card, .panel {
background: var(--cas-bg-white);
border: 1px solid var(--cas-border-mid);
border-radius: var(--cas-radius-xl);
padding: 24px;
/* 卡片内的筛选栏 sticky actions 用白底融合卡片背景；页面级（无 card 包裹）的筛选栏
由 .cas-app 默认值 --cas-filter-right-bg: var(--cas-bg-base) 接管 */
--cas-filter-right-bg: var(--cas-bg-white);
}
.cas-card + .cas-card, .card + .card, .panel + .panel { margin-top: 20px; }
/* 横向并排容器内的相邻卡片不加垂直间距 —— v5.1 这些容器已用 gap 控制，
.cas-card + .cas-card 的默认 margin-top: 20px 会让第二张卡顶部下移 20px 错位。 */
.cards-row > .cas-card + .cas-card,
.projects-grid > .cas-card + .cas-card,
.info-cards-inner > .cas-card + .cas-card,
.prep-grid > .cas-card + .cas-card,
.asset-grid > .cas-card + .cas-card,
.section-row > .cas-card + .cas-card,
.status-def-layout > .cas-card + .cas-card,
.access-layout > .cas-card + .cas-card {
margin-top: 0;
}
.cas-card-title, .card-title, .panel-title {
font-size: 16px; font-weight: var(--cas-fw-bold); color: var(--cas-text-primary);
margin-bottom: 18px;
flex-shrink: 0;
white-space: nowrap;
}
/* 卡片/面板标题栏：紧凑 40px / 13px / 第二+ 子元素整组靠右
.panel-header 跟 .cas-card-header--bar 共享同一套样式，唯一差异是底色：
· .panel-header → 白底（透明继承父 .cas-card），用作"与卡片融合"的标题栏
· .cas-card-header--bar → 灰底（var(--cas-bg-tag)），用作"明显视觉分层"的紧凑信息卡顶部
布局：第一个子元素靠左 + 第二个子元素 margin-left:auto 把后续整组推到最右，组内 10px gap。 */
.panel-header,
.cas-card-header--bar {
display: flex; align-items: center; gap: 10px;
padding: 0 14px; height: 40px;
border-bottom: 1px solid var(--cas-border);
font-size: 13px; font-weight: 600;
color: var(--cas-text-primary);
flex-shrink: 0;
/* 窗口收窄时不允许内容换行（panel-header 是固定 40px 高，换行会被裁/溢出）
窄到放不下时由父 .cas-card 的 overflow:hidden 接管裁剪。 */
white-space: nowrap;
}
.panel-header > :first-child + *,
.cas-card-header--bar > :first-child + * { margin-left: auto; }
/* panel-header 内的 title 强制 13px / 0 margin（独立用还是 16px）
覆盖 .panel-title（旧名）+ .cas-card-title（cas-* 现代名）+ .card-title（旧别名），
保持 13px 缩小规则对三套同义类名一致生效。 */
.panel-header .panel-title,
.panel-header .cas-card-title,
.panel-header .card-title { font-size: 13px; margin-bottom: 0; }
/* 灰底变体：唯一差异是底色 */
.cas-card-header--bar { background: var(--cas-bg-tag); }
/* =============================================================================
* 14. TABLES · 行高 36 / 居中对齐 / .td-left 例外
* ============================================================================= */
.cas-table-wrap, .table-wrap {
overflow-x: auto;
border: 1px solid var(--cas-border);
border-radius: var(--cas-radius-lg);
background: var(--cas-bg-white);
}
.cas-data-table, .data-table {
width: 100%; border-collapse: collapse;
}
.cas-data-table th, .data-table th {
font-size: 11px; font-weight: var(--cas-fw-bold);
color: var(--cas-text-primary);
text-align: center;
padding: 9px 8px; line-height: 17px;
background: var(--cas-bg-tag);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
box-sizing: border-box;
border-bottom: 1px solid var(--cas-border-mid);
}
.cas-data-table td, .data-table td {
font-size: 11px; line-height: 17px;
color: var(--cas-text-secondary);
text-align: center;
padding: 9px 8px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
box-sizing: border-box;
border-bottom: 1px solid var(--cas-border);
vertical-align: middle;
}
.cas-data-table tr:last-child td,
.data-table tr:last-child td { border-bottom: none; }
/* hover：用 :not(:has(tr:hover)) 限定"自身是最深的被 hover tr"——避免在嵌套表格中
父 tr 与子 tr 同时高亮。`> td` 直接子选择器再保险一层：父 tr 即使被 hover
也不会把 hover 背景跨表渗到嵌套子表的 td。 */
.cas-data-table tr:hover:not(:has(tr:hover)) > td,
.data-table tr:hover:not(:has(tr:hover)) > td { background: var(--cas-hover-bg); }
.cas-data-table td.td-left, .data-table td.td-left { text-align: left; }
/* 排序表头：在 th 上加 .sortable，并在内部插
。
JS 切换 th 的 .sort-asc / .sort-desc 即可让箭头变向 + 染品牌色。
无排序态显示 ⇅（muted），升序 ↑ / 降序 ↓（accent）。 */
.cas-data-table th.sortable, .data-table th.sortable {
cursor: pointer; user-select: none; white-space: nowrap;
transition: color var(--cas-dur-fast);
}
.cas-data-table th.sortable:hover, .data-table th.sortable:hover {
color: var(--cas-text-secondary);
}
.cas-sort-icon {
display: inline-block; margin-left: 4px;
font-size: 11px; opacity: 0.4; line-height: 1;
transition: opacity var(--cas-dur-fast), color var(--cas-dur-fast);
}
.cas-sort-icon::before { content: "⇅"; }
.cas-data-table th.sort-asc .cas-sort-icon,
.cas-data-table th.sort-desc .cas-sort-icon,
.data-table th.sort-asc .cas-sort-icon,
.data-table th.sort-desc .cas-sort-icon {
opacity: 1; color: var(--cas-accent);
}
.cas-data-table th.sort-asc .cas-sort-icon::before,
.data-table th.sort-asc .cas-sort-icon::before { content: "↑"; }
.cas-data-table th.sort-desc .cas-sort-icon::before,
.data-table th.sort-desc .cas-sort-icon::before { content: "↓"; }
/* =============================================================================
* 15. BADGE · 状态标签
* ★ 颜色完全由 CSS 变量 --cas-status-{entity}-{key} 驱动
* ★ 用法：
待开始
* ★ 选用一个用户在 system 设置的"主色"，自动派生 bg/fg：
* fg = var(--cas-status-{entity}-{key}) · 文字色 = 用户选的实色
* bg = hsl(from var(--cas-status-{entity}-{key}) h s 93%)
* 保持原色 hue+saturation，亮度提到 93% 得到一个保色相的鲜亮浅底
* （= statuses.html _hexToTintBg JS 函数的 CSS 化版本，让 admin 编辑预览
* 和实际渲染口径完全一致；老的 color-mix(in oklab, .. 13%, transparent)
* 对低亮度高饱和色（如 #907200 olive yellow）会变脏黄/灰，已弃用）
* ★ 兼容老类名（.badge / .status-* / .rs-* / .rv-*）—— base-design.js 会做映射
* ============================================================================= */
.cas-badge, .badge,
.cas-badge-on, .cas-badge-off, .badge-on, .badge-off {
display: inline-flex; align-items: center; justify-content: center;
padding: 2px 7px; border-radius: var(--cas-radius-xs);
font-size: 11px; font-weight: var(--cas-fw-bold);
white-space: nowrap; line-height: 1.4;
/* 默认中性灰，避免没设 data-* 时露白；.cas-badge-on/off 由下方规则覆盖颜色 */
color: var(--cas-text-muted);
background: var(--cas-bg-tag);
}
/* 多个 badge 横向排列容器：badge 之间 6px 间距，超出自动换行
用法：
${badge1}${badge2}…
适用：审核链节点、标签组、多状态指示等。 */
.cas-badge-row {
display: inline-flex; flex-wrap: wrap;
gap: 6px; align-items: center; justify-content: center;
vertical-align: middle;
}
/* 统一规则：根据 data-entity + data-status 拉对应变量。
每个状态写一条规则（共 22 条）。新增状态时同时改 :root 默认值与本块。 */
.cas-badge[data-entity="project"][data-status="todo"] { color: var(--cas-status-project-todo); background: hsl(from var(--cas-status-project-todo) h s 93%); }
.cas-badge[data-entity="project"][data-status="in_progress"] { color: var(--cas-status-project-in_progress); background: hsl(from var(--cas-status-project-in_progress) h s 93%); }
.cas-badge[data-entity="project"][data-status="completed"] { color: var(--cas-status-project-completed); background: hsl(from var(--cas-status-project-completed) h s 93%); }
.cas-badge[data-entity="project"][data-status="cancelled"] { color: var(--cas-status-project-cancelled); background: hsl(from var(--cas-status-project-cancelled) h s 93%); }
.cas-badge[data-entity="asset"][data-status="todo"] { color: var(--cas-status-asset-todo); background: hsl(from var(--cas-status-asset-todo) h s 93%); }
.cas-badge[data-entity="asset"][data-status="in_progress"] { color: var(--cas-status-asset-in_progress); background: hsl(from var(--cas-status-asset-in_progress) h s 93%); }
.cas-badge[data-entity="asset"][data-status="completed"] { color: var(--cas-status-asset-completed); background: hsl(from var(--cas-status-asset-completed) h s 93%); }
.cas-badge[data-entity="asset"][data-status="confirmed"] { color: var(--cas-status-asset-confirmed); background: hsl(from var(--cas-status-asset-confirmed) h s 93%); }
.cas-badge[data-entity="task"][data-status="todo"] { color: var(--cas-status-task-todo); background: hsl(from var(--cas-status-task-todo) h s 93%); }
.cas-badge[data-entity="task"][data-status="in_progress"] { color: var(--cas-status-task-in_progress); background: hsl(from var(--cas-status-task-in_progress) h s 93%); }
.cas-badge[data-entity="task"][data-status="pending_review"] { color: var(--cas-status-task-pending_review); background: hsl(from var(--cas-status-task-pending_review) h s 93%); }
.cas-badge[data-entity="task"][data-status="pending_revision"] { color: var(--cas-status-task-pending_revision); background: hsl(from var(--cas-status-task-pending_revision) h s 93%); }
.cas-badge[data-entity="task"][data-status="approved"] { color: var(--cas-status-task-approved); background: hsl(from var(--cas-status-task-approved) h s 93%); }
.cas-badge[data-entity="task"][data-status="cancelled"] { color: var(--cas-status-task-cancelled); background: hsl(from var(--cas-status-task-cancelled) h s 93%); }
.cas-badge[data-entity="generation"][data-status="pending"] { color: var(--cas-status-generation-pending); background: hsl(from var(--cas-status-generation-pending) h s 93%); }
.cas-badge[data-entity="generation"][data-status="processing"] { color: var(--cas-status-generation-processing); background: hsl(from var(--cas-status-generation-processing) h s 93%); }
.cas-badge[data-entity="generation"][data-status="done"] { color: var(--cas-status-generation-done); background: hsl(from var(--cas-status-generation-done) h s 93%); }
.cas-badge[data-entity="generation"][data-status="failed"] { color: var(--cas-status-generation-failed); background: hsl(from var(--cas-status-generation-failed) h s 93%); }
/* review · 5 态：未提交/待审核/全部使用/部分使用/不使用；兼容旧 pending/approved/closed/rejected */
.cas-badge[data-entity="review"][data-status="pending"],
.cas-badge[data-entity="review"][data-status="pending_review"] { color: var(--cas-status-review-pending_review); background: hsl(from var(--cas-status-review-pending_review) h s 93%); }
.cas-badge[data-entity="review"][data-status="all_used"],
.cas-badge[data-entity="review"][data-status="approved"] { color: var(--cas-status-review-all_used); background: hsl(from var(--cas-status-review-all_used) h s 93%); }
.cas-badge[data-entity="review"][data-status="partial_used"] { color: var(--cas-status-review-partial_used); background: hsl(from var(--cas-status-review-partial_used) h s 93%); }
.cas-badge[data-entity="review"][data-status="not_used"] { color: var(--cas-status-review-not_used); background: hsl(from var(--cas-status-review-not_used) h s 93%); }
.cas-badge[data-entity="review"][data-status="rejected"],
.cas-badge[data-entity="review"][data-status="closed"] { color: var(--cas-status-review-closed); background: hsl(from var(--cas-status-review-closed) h s 93%); }
.cas-badge[data-entity="review"][data-status="not_submitted"] { color: var(--cas-status-review-not_submitted); background: hsl(from var(--cas-status-review-not_submitted) h s 93%); }
/* project entity 扩展：项目类型维度（个人 / 团队），非状态色，与 project status 共存 */
.cas-badge[data-entity="project"][data-status="personal"] {
color: var(--cas-text-secondary);
background: var(--cas-bg-tag);
}
.cas-badge[data-entity="project"][data-status="team"] {
color: var(--cas-accent);
background: color-mix(in oklab, var(--cas-accent) calc(var(--cas-status-bg-alpha) * 100%), transparent);
}
/* media entity（任务媒体类型 / 资产类型）—— 7 档共用中性灰，data-status 留作语义占位
* 后续若要按 image/video/text/audio/3d/other 分色，仅需改本块（无需改模板）*/
.cas-badge[data-entity="media"][data-status="image"],
.cas-badge[data-entity="media"][data-status="video"],
.cas-badge[data-entity="media"][data-status="text"],
.cas-badge[data-entity="media"][data-status="audio"],
.cas-badge[data-entity="media"][data-status="editing"],
.cas-badge[data-entity="media"][data-status="3d"],
.cas-badge[data-entity="media"][data-status="other"] {
color: var(--cas-text-secondary);
background: var(--cas-bg-tag);
}
/* tool entity（工具状态）—— new / soon / maintenance / advance 四档 */
.cas-badge[data-entity="tool"][data-status="new"] {
color: var(--cas-text-on-accent);
background: var(--cas-accent);
}
.cas-badge[data-entity="tool"][data-status="soon"] {
color: var(--cas-info);
background: color-mix(in oklab, var(--cas-info) calc(var(--cas-status-bg-alpha) * 100%), transparent);
}
.cas-badge[data-entity="tool"][data-status="maintenance"] {
color: var(--cas-warning);
background: color-mix(in oklab, var(--cas-warning) calc(var(--cas-status-bg-alpha) * 100%), transparent);
}
.cas-badge[data-entity="tool"][data-status="advance"] {
color: var(--cas-accent);
background: color-mix(in oklab, var(--cas-accent) calc(var(--cas-status-bg-alpha) * 100%), transparent);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* 启用/停用：与状态实体无关，直接用语义色 */
.cas-badge-on, .badge-on { color: var(--cas-success); background: var(--cas-success-soft); }
.cas-badge-off, .badge-off { color: var(--cas-danger); background: var(--cas-danger-soft); }
/* =============================================================================
* 16. MODAL · 三段式（header / body / footer），标题与底部冻结
* ============================================================================= */
.cas-modal-overlay, .modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.35);
display: none; align-items: center; justify-content: center;
z-index: 500;
}
.cas-modal-overlay.open, .modal-overlay.open { display: flex; }
.cas-modal, .modal {
background: var(--cas-bg-white); border-radius: var(--cas-radius-xl);
width: 420px; max-width: calc(100vw - 32px); max-height: 90vh;
display: flex; flex-direction: column; overflow: hidden;
box-shadow: var(--cas-shadow-lg);
}
.cas-modal-header, .modal-header {
padding: 18px 20px 14px; border-bottom: 1px solid var(--cas-border);
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.cas-modal-title, .modal-title {
font-size: 16px; font-weight: var(--cas-fw-bold); color: var(--cas-text-primary);
}
.cas-modal-close {
width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--cas-radius-sm); color: var(--cas-text-muted); cursor: pointer;
transition: all var(--cas-dur-base);
}
.cas-modal-close:hover { background: var(--cas-hover-bg); color: var(--cas-text-primary); }
.cas-modal-body, .modal-body {
padding: 20px; overflow-y: auto; flex: 1;
}
.cas-modal-footer, .modal-footer {
padding: 18px 20px; border-top: 1px solid var(--cas-border);
display: flex; justify-content: flex-end; gap: 8px;
flex-shrink: 0;
}
/* 弹窗内所有按钮统一 32px，与 input/select 同高（footer + body 同款）。
表格内按钮在下方单独覆盖回 24px 紧凑档（避免把行高撑爆）。 */
.cas-modal-overlay button.cas-btn, .cas-modal-overlay button.btn,
.cas-modal-overlay button.cas-btn-sm, .cas-modal-overlay button.btn-sm,
.cas-modal-overlay button.cas-btn-sm-primary, .cas-modal-overlay button.btn-sm-primary,
.cas-modal-overlay button.cas-btn-ghost, .cas-modal-overlay button.btn-ghost {
height: 32px; padding: 0 14px;
font-size: 11px; font-weight: var(--cas-fw-bold);
}
/* 表格内的按钮保持 24px 紧凑（与 cas-data-table 内 cas-select-trigger 同档），
避免 td 行高被撑高。优先级 0,3,1（同上面规则 0,2,1）必赢。 */
.cas-modal-overlay .cas-data-table button.cas-btn-sm,
.cas-modal-overlay .cas-data-table button.cas-btn-sm-primary,
.cas-modal-overlay .cas-data-table button.cas-btn-ghost,
.cas-modal-overlay .data-table button.cas-btn-sm,
.cas-modal-overlay .data-table button.cas-btn-sm-primary,
.cas-modal-overlay .data-table button.cas-btn-ghost {
height: 24px; padding: 0 10px;
}
/* modal 内输入框 / 下拉框统一 32px 高 / 13px 字号；
含升级后的 cas-select-trigger（默认 28px/11px 仅用于筛选栏紧凑布局，
弹窗内表单语境需与 input 对齐到 32px/13px）。
兼容三种 modal 类层级：.cas-modal-body（base 三段式）/ .modal-body（旧别名）
/ .modal（裸 modal 类，无 -body 内层；如项目设置 / 任务编辑等历史 modal） */
/* 用 .cas-modal-overlay 作锚点 —— 所有 modal 必包在这层；不依赖具体内层
modal 容器 class（历史遗留有 .cas-modal-body / .modal-body / .modal /
.settings-modal-inner / .um-modal / .pm-modal 等多套自家命名） */
/* ⚠️ input 必须带 :not([type=checkbox]):not([type=radio])，与上方页面级规则
对齐特异性（3 class + 1 元素），否则页面级 36px 会赢覆盖弹窗 32px。
font-size 11px 跟下方 .cas-field .cas-select-trigger（line 1289）同档，
让弹窗内 input / select / textarea / cas-select trigger 统一 11px —— 否则
.cas-field input 默认 13px 跟 trigger 11px 视觉对不齐（原 1105 那条 13px 试图
把 trigger 提到 13px 反方向统一，但被 .cas-field 同特异性后写规则覆盖，纯属无效）。
textarea 单独成段：只继承字号统一，高度沿用 base line 631-633 的 72px + resize:vertical。 */
.cas-modal-overlay .cas-field input:not([type=checkbox]):not([type=radio]),
.cas-modal-overlay .cas-field select,
.cas-modal-overlay .field input:not([type=checkbox]):not([type=radio]),
.cas-modal-overlay .field select {
height: 32px;
font-size: 11px;
}
.cas-modal-overlay .cas-field textarea,
.cas-modal-overlay .field textarea {
font-size: 11px;
}
.cas-modal-overlay .cas-select-trigger {
height: 32px;
font-size: 11px;
padding: 0 10px;
}
/* 表格单元格内的下拉跟随 td 的 11px 字号（table cells 一律 11px，base §13）；
高度同步缩到 24px 与 cas-btn-sm 同档，避免 32px 把 td 行高撑到 51px */
.cas-modal-overlay .cas-data-table .cas-select-trigger,
.cas-modal-overlay .data-table .cas-select-trigger {
font-size: 11px;
height: 24px;
padding: 0 8px;
}
/* 紧凑确认弹窗（删除/移出/转换等单段消息+两按钮场景）
直接挂在 .cas-modal-overlay 内，替代 .cas-modal 三段结构 */
.cas-confirm-modal {
background: var(--cas-bg-white); border-radius: var(--cas-radius-xl);
width: 420px; max-width: calc(100vw - 32px);
padding: 24px 28px 20px;
box-shadow: var(--cas-shadow-lg);
}
.cas-confirm-title {
font-size: 16px; font-weight: var(--cas-fw-bold); color: var(--cas-text-primary);
margin-bottom: 12px;
}
.cas-confirm-body {
font-size: 13px; color: var(--cas-text-secondary); line-height: 1.7;
margin-bottom: 8px;
}
/* 确认弹窗主消息内的实体名一律包
：自动加粗 + 主文字色高亮
注意：danger-note 内的 保持原 danger 色，仅加粗（避免红/黑色拼接） */
.cas-confirm-body strong {
color: var(--cas-text-primary);
font-weight: var(--cas-fw-bold);
}
.cas-confirm-danger-note strong {
font-weight: var(--cas-fw-bold);
}
.cas-confirm-danger-note {
font-size: 11px; color: var(--cas-danger);
margin-bottom: 18px;
}
.cas-confirm-actions {
display: flex; gap: 8px; justify-content: flex-end;
}
/* ──────────────────────────────────────────────────────────────────────────
* 16.4 SETTINGS MODAL · 项目设置 / 创建弹窗共用 (step indicator + 2col grid)
* 用法：见 _partials/_project_settings_modal.html
* - settings-step-indicator → 步骤点容器（顶部 1/2 进度）
* - settings-step-dot[.active|.done] → 圆形步骤点
* - settings-step-line → 两个步骤点中间的连线
* - settings-2col → 弹窗内常用的 2 列网格（field 上下间距 0）
* 历史：原各页面（index/projects/project-detail/system/api_reference/system/models）
* 各写一份相同 CSS，2026-05-26 合并到 base。
* ────────────────────────────────────────────────────────────────────────── */
.settings-step-indicator { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.settings-step-dot {
width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600;
background: var(--cas-bg-tag); color: var(--cas-text-muted);
border: 1.5px solid var(--cas-border-mid); transition: all 0.2s;
}
.settings-step-dot.active { background: var(--cas-accent); color: #fff; border-color: var(--cas-accent); }
.settings-step-dot.done { background: var(--cas-accent-soft); color: var(--cas-accent); border-color: var(--cas-accent); }
.settings-step-line { width: 28px; height: 1.5px; background: var(--cas-border-mid); }
.settings-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.settings-2col .cas-field { margin-bottom: 0; }
/* =============================================================================
* 16.5 TOGGLE SWITCH · cas-switch
* 用法：
*
* JS 读值：document.getElementById('my-id').checked（与原生 checkbox 完全一致）
* .cas-switch-label 标准文案：「启用」（弹窗 / 表单内的开关标签）
* ============================================================================= */
.cas-switch,
.field label.cas-switch,
.cas-field label.cas-switch {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; user-select: none;
font-weight: 400;
/* 重置 .field label / .cas-field label 的 margin-bottom:5px，否则 cas-switch
作为