/* 各屏的样式表。类名沿用最初那份 Dashboard 设计稿（稿子本身已不在仓库里，
   它是 2.4MB 的 .dc.html，运行时一个字节都不读）——改类名要连着 pages-*.js 一起改。
   设计令牌（颜色、间距、圆角、阴影）在 theme.css。 */
body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }
.satu-nav svg { flex: none; }
.satu-nav { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 9px var(--space-3); border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body); font-size: 14px; text-align: left; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.satu-nav:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.satu-nav[aria-current="true"] { background: var(--color-accent); color: var(--color-bg); font-weight: 600; }
.satu-nav[aria-current="true"]:hover { background: var(--color-accent-600); }
.satu-nav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.satu-group { font-size: 11.5px; letter-spacing: 0.04em; padding: 0 var(--space-3); margin: 0; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.satu-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; border: 0; background: transparent; font-family: var(--font-body); text-align: left; cursor: pointer; }
.satu-group-toggle:hover { color: var(--color-text); }
.satu-group-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.satu-groupchev { display: flex; transition: transform 140ms ease; }
.satu-navgroup[data-open="false"] .satu-groupchev { transform: rotate(-90deg); }
.satu-sep { height: 1px; background: var(--color-divider); margin: var(--space-3) var(--space-2); }
/* 侧栏分组的外壳。设计稿里没有这一层——稿子上每一组都是写死的，自然不会空；
   代码里各组由插件贡献，Plugin 那组现在就一个人都没有，Admin 那组则整段只给管理员看。
   `display: contents` 让它在布局上不存在（组里的项照旧是那列 flex 的直接子项，间距不变），
   只在「这一组里一个 .satu-nav 都没有」时把分隔线和标题一起收走。
   `:has()` 不支持的旧浏览器上退回今天的样子：空标题照旧显示，别的都不受影响。 */
.satu-navgroup { display: contents; }
.satu-navgroup:not([data-collapsible="true"]):not(:has(.satu-nav)) { display: none; }
/* 组和组之间要留一口气，否则四个标题混在一列 2px 间距的按钮里，看着还是一根柱子。
   `display: contents` 的元素自己没有盒子，撑不了外边距——所以顶在它的第一个孩子上，
   不管那是标题还是（第一组那样没标题时的）头一条。 */
.satu-navgroup + .satu-navgroup > :first-child { margin-top: var(--space-3); }
/* 收起时标题整条不画，上面那行落在一个 display:none 的元素上等于没写；这时候改由
   头一颗图标自己让开——不然十几个图标连成一片，分组白分了。 */
.satu-rail .satu-navgroup + .satu-navgroup > .satu-nav:first-of-type { margin-top: var(--space-3); }
.satu-card { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; box-sizing: border-box; padding: var(--space-4); background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.satu-card:hover { box-shadow: var(--shadow-md); }
.satu-meta { display: flex; align-items: center; gap: var(--space-4); font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.satu-meta span { display: flex; align-items: center; gap: 4px; }
.satu-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.satu-name { font-family: var(--font-heading); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satu-desc { margin: 0; font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.satu-rail .satu-label, .satu-rail .satu-group, .satu-rail .satu-brandtext, .satu-rail .satu-userinfo, .satu-rail .satu-usercog { display: none; }
.satu-rail .satu-nav { justify-content: center; padding: 9px 0; }
.satu-rail .satu-brand { padding: 0 0 var(--space-4); justify-content: center; }
.satu-rail .satu-brand img { width: 32px; height: 32px; min-width: 32px; flex: none; }
.satu-rail .satu-userrow { justify-content: center; }
.satu-caret svg { transition: transform 140ms ease; }
.satu-caret[data-open="false"] svg { transform: rotate(-90deg); }
.satu-sublist { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--space-2); }
.satu-rail .satu-sublist { display: none; }
.satu-subitem[aria-current="true"] { background: var(--secondary); color: var(--color-text); font-weight: 600; }
.satu-subrow { position: relative; display: flex; align-items: center; border-radius: var(--radius-sm); }
.satu-subrow:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.satu-subrow:hover .satu-subitem { color: var(--color-text); padding-right: 34px; }
.satu-subdel { position: absolute; right: 4px; display: none; align-items: center; justify-content: center; padding: 5px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.satu-subrow:hover .satu-subdel { display: flex; }
.satu-subdel:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.satu-subitem { display: block; width: 100%; box-sizing: border-box; padding: 6px var(--space-3) 6px 41px; border: 0; background: transparent; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13px; text-align: left; color: var(--muted-foreground); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.satu-more { display: block; width: 100%; box-sizing: border-box; margin-top: 2px; padding: 5px var(--space-3) 5px 41px; border: 0; background: transparent; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 12px; font-weight: 600; text-align: left; color: var(--color-accent-700); cursor: pointer; }
.satu-more:hover { background: var(--color-accent-100); }
.satu-taskrow > *, .satu-agentrow > *, .satu-modelrow > *, .satu-memberrow > *,
.satu-grouprow > *, .satu-provrow > *, .satu-embedrow > *, .satu-toolrow > *, .satu-runrow > *,
.satu-embedrow > div > span, .satu-toolrow > div > span, .satu-memberrow > div > div > div {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.satu-tasklink > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.satu-tasklink { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0; border: 0; background: transparent; font-family: var(--font-body); text-align: left; color: var(--color-text); cursor: pointer; width: 100%; }
.satu-tasklink:hover span:first-child { color: var(--color-accent-700); }
.satu-menu[data-flip="true"] { top: auto; bottom: calc(100% + 6px); }
.satu-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; min-width: 168px; padding: 5px; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.satu-menuitem { display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; font-family: var(--font-body); font-size: 13.5px; text-align: left; color: var(--color-text); cursor: pointer; white-space: nowrap; }
.satu-menuitem:hover { background: var(--secondary); }
.satu-menuitem[data-danger="true"] { color: var(--color-accent-700); }
.satu-menuitem[data-danger="true"]:hover { background: var(--color-accent-100); }
.satu-call { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); overflow: hidden; }
.satu-callhead { display: grid; grid-template-columns: 26px 84px 1fr auto 15px; gap: var(--space-3); align-items: center; width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4); border: 0; background: transparent; font-family: var(--font-body); text-align: left; cursor: pointer; color: var(--color-text); }
.satu-callhead:hover { background: var(--card); }
.satu-callidx { font-size: 11.5px; font-weight: 700; color: var(--muted-foreground); }
.satu-calltype { justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
.satu-calltype[data-kind="system"] { background: var(--color-neutral-300); color: var(--color-neutral-800); }
.satu-calltype[data-kind="context"] { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.satu-calltype[data-kind="model"] { background: var(--color-accent-100); color: var(--color-accent-800); }
.satu-calltype[data-kind="tool"] { background: var(--secondary); color: var(--secondary-foreground); }
.satu-calltitle { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satu-callmeta { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.satu-callchev { color: var(--muted-foreground); transition: transform 140ms ease; }
.satu-callhead[aria-expanded="true"] .satu-callchev { transform: rotate(180deg); }
.satu-callbody { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.satu-code { margin: 0; padding: var(--space-3); background: var(--color-neutral-900); color: rgba(255,255,255,0.86); border-radius: var(--radius-sm); font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-x: auto; }
.satu-log { background: var(--color-neutral-900); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.satu-logline { display: grid; grid-template-columns: 84px 62px 1fr; gap: var(--space-3); align-items: baseline; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.7; padding: 2px 6px; border-radius: 4px; }
.satu-logline:hover { background: rgba(255,255,255,0.06); }
.satu-logtime { color: rgba(255,255,255,0.42); }
.satu-loglevel { font-weight: 700; letter-spacing: 0.04em; }
.satu-logtext { color: rgba(255,255,255,0.86); white-space: pre-wrap; }
.satu-logline[data-level="INFO"] .satu-loglevel { color: #9cc7f5; }
.satu-logline[data-level="STEP"] .satu-loglevel { color: #b7f5c8; }
.satu-logline[data-level="WARN"] .satu-loglevel { color: #f5d79c; }
.satu-logline[data-level="ERROR"] .satu-loglevel { color: #f5a79c; }
.satu-logline[data-level="ERROR"] .satu-logtext { color: #ffd9d3; }
/* 二级页面的头：返回图标 + 面包屑，顶掉一级页面那一个光标题。
   上一级不缩，当前这一级才截断——路径的前半段是拿来导航的，截了就没用了。 */
.satu-crumbs { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.satu-crumblink { flex: none; padding: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 14px; color: var(--muted-foreground); cursor: pointer; white-space: nowrap; }
.satu-crumblink:hover { color: var(--color-text); }
.satu-crumblink:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.satu-crumbsep { flex: none; font-size: 14px; color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.satu-crumbcur { min-width: 0; font-size: 14px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satu-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 12px 5px 8px; border: 0; border-radius: 999px; background: transparent; font-family: var(--font-body); font-size: 13px; color: var(--muted-foreground); cursor: pointer; }
.satu-back:hover { background: var(--secondary); color: var(--color-text); }
/* 稿子里这条写成了 `.satu-code`，把上面那条深色代码块整个盖掉。看 `resize: vertical`
   就知道它针对的是编辑器里的 textarea（soul.md、Skill 文件），不是调用链路里的
   <pre>。收窄到 textarea，两处各自成立。 */
textarea.satu-code { background: var(--popover); color: var(--color-text); border-radius: var(--radius-md); resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.65; }
.satu-filesplit { display: grid; grid-template-columns: 216px 1fr; gap: var(--space-3); align-items: start; }
.satu-filetree { display: flex; flex-direction: column; gap: 1px; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); max-height: 340px; overflow-y: auto; }
.satu-fileitem { display: flex; align-items: center; gap: 7px; width: 100%; box-sizing: border-box; padding: 6px var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; font-family: var(--font-body); font-size: 12.5px; text-align: left; color: var(--secondary-foreground); cursor: pointer; }
.satu-fileitem:hover { background: var(--secondary); color: var(--color-text); }
.satu-fileitem[aria-current="true"] { background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; }
.satu-fileicon { display: flex; flex: none; color: var(--muted-foreground); }
.satu-fileitem[aria-current="true"] .satu-fileicon { color: var(--color-accent-700); }
.satu-fileadd { position: relative; display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); padding: 6px var(--space-2); border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--color-accent-700); cursor: pointer; }
.satu-fileeditor { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.satu-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--space-6) var(--space-4); border: 1px dashed var(--input-border); border-radius: var(--radius-lg); background: var(--card); cursor: pointer; }
.satu-drop:hover { border-color: var(--color-accent-400); background: var(--color-accent-100); }
.satu-dropicon { width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-700); display: flex; align-items: center; justify-content: center; }
.satu-uploadrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); }
.satu-grouphead { display: grid; grid-template-columns: 2.4fr 0.7fr 0.9fr 1fr 190px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-grouprow { display: grid; grid-template-columns: 2.4fr 0.7fr 0.9fr 1fr 190px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-grouprow:last-child { border-bottom: 0; }
.satu-grouprow:hover { background: var(--card); }
.satu-memberhead { display: grid; grid-template-columns: minmax(170px, 2.2fr) 112px 84px minmax(104px, 1fr) 100px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-memberrow { display: grid; grid-template-columns: minmax(170px, 2.2fr) 112px 84px minmax(104px, 1fr) 100px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-memberrow:last-child { border-bottom: 0; }
.satu-memberrow:hover { background: var(--card); }
/* 长列表底下那一条。跟表头同一个底色，读起来就是这张表的一部分，而不是页面上
   另外飘着的一排按钮。上边界由最后一行自己的分隔线给出——它不再是 :last-child。 */
.satu-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 10px var(--space-4); background: var(--card); font-size: 12.5px; color: var(--muted-foreground); }
.satu-pager .btn { font-size: 12.5px; padding: 4px 10px; }
.satu-pager .btn[disabled] { opacity: 0.45; cursor: default; }
.satu-toolhead { display: grid; grid-template-columns: 2.2fr 1fr 0.9fr 0.9fr 0.7fr 96px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-toolrow { display: grid; grid-template-columns: 2.2fr 1fr 0.9fr 0.9fr 0.7fr 96px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-toolrow:last-child { border-bottom: 0; }
.satu-toolrow:hover { background: var(--card); }
.satu-provhead { display: grid; grid-template-columns: minmax(150px, 2fr) 80px 104px 88px 104px 124px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-provrow { display: grid; grid-template-columns: minmax(150px, 2fr) 80px 104px 88px 104px 124px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-provrow:last-child { border-bottom: 0; }
.satu-provrow:hover { background: var(--card); }
.satu-providermark { width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 15px; }
.satu-embedhead { display: grid; grid-template-columns: minmax(180px, 2fr) 104px 64px 88px 96px 92px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-embedrow { display: grid; grid-template-columns: minmax(180px, 2fr) 104px 64px 88px 96px 92px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-embedrow:last-child { border-bottom: 0; }
.satu-embedrow:hover { background: var(--card); }
.satu-modelhead { display: grid; grid-template-columns: 2fr 1fr 0.9fr 0.7fr 1.1fr 1.1fr 96px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-modelrow { display: grid; grid-template-columns: 2fr 1fr 0.9fr 0.7fr 1.1fr 1.1fr 96px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-modelrow:last-child { border-bottom: 0; }
.satu-modelrow:hover { background: var(--card); }
.satu-devicerow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-devicerow:last-child { border-bottom: 0; }
.satu-deviceicon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--secondary-foreground); }
.satu-bars { display: flex; align-items: flex-end; gap: 6px; height: 168px; padding-top: var(--space-2); }
.satu-barcol { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.satu-barstack { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--secondary); border-radius: var(--radius-sm); overflow: hidden; }
.satu-barfill { width: 100%; background: var(--color-accent); border-radius: var(--radius-sm); }
.satu-barcol:hover .satu-barfill { background: var(--color-accent-600); }
.satu-barlabel { font-size: 10.5px; color: var(--muted-foreground); white-space: nowrap; }
.satu-meter { height: 8px; border-radius: 999px; background: var(--secondary); overflow: hidden; }
.satu-meterfill { height: 100%; border-radius: 999px; background: var(--color-accent); }
.satu-meterfill[data-alt="true"] { background: var(--chart-1); }
.satu-packcard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); font-family: var(--font-body); color: var(--color-text); cursor: pointer; }
.satu-packcard:hover { background: var(--secondary); }
.satu-packcard[aria-pressed="true"] { border-color: var(--color-accent-400); background: var(--color-accent-100); }
.satu-scoperow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 5px 0; border-top: 1px solid var(--border); }
.satu-grow { min-height: 48px; max-height: 200px; overflow-y: auto; resize: none; }
.satu-selicon { display: inline-flex; align-items: center; flex: none; margin-right: -4px; color: var(--secondary-foreground); }
.satu-pickicon { display: inline-flex; align-items: center; flex: none; margin-right: -2px; }
.satu-modelsel { width: 168px; max-width: 168px; flex: none; text-align-last: right; }
.satu-inlinesel { max-width: 160px; min-width: 92px; flex: 0 1 auto; padding: 4px 6px 4px 4px; border: 0; border-radius: var(--radius-sm); background: transparent; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--secondary-foreground); cursor: pointer; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; }
.satu-inlinesel:hover { background: var(--secondary); color: var(--color-text); }
.satu-inlinesel:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.satu-mdview { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.satu-mdblock[data-kind="h1"] { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.satu-mdblock[data-kind="h2"] { margin-top: var(--space-2); }
.satu-mdtr { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-3); padding: 8px var(--space-3); border-top: 1px solid var(--border); }
.satu-mdtr:first-child { border-top: 0; }
.satu-mdtr[data-head="true"] { background: var(--card); font-weight: 600; color: var(--muted-foreground); font-size: 12px; }
.satu-chhead { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) 88px 88px 48px; gap: var(--space-2); align-items: center; padding: 9px var(--space-3); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-chrow { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) 88px 88px 48px; gap: var(--space-2); align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--border); }
.satu-chrow:last-child { border-bottom: 0; }
.satu-chrow:hover { background: var(--card); }
.satu-chrow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satu-kbhead { display: grid; grid-template-columns: minmax(0, 2.2fr) 76px 56px 88px 104px; gap: var(--space-2); align-items: center; padding: 9px var(--space-3); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-kbrow { display: grid; grid-template-columns: minmax(0, 2.2fr) 76px 56px 88px 104px; gap: var(--space-2); align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--border); }
.satu-kbrow:last-child { border-bottom: 0; }
.satu-kbrow:hover { background: var(--card); }
.satu-kbrow > * { min-width: 0; }
.satu-dochead { display: grid; grid-template-columns: minmax(140px, 1.2fr) 96px minmax(120px, 1.2fr) 92px 80px; gap: var(--space-2); align-items: center; padding: 9px var(--space-3); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-docrow { display: grid; grid-template-columns: minmax(140px, 1.2fr) 96px minmax(120px, 1.2fr) 92px 80px; gap: var(--space-2); align-items: center; padding: 10px var(--space-3); border-bottom: 1px solid var(--border); }
.satu-docrow:last-child { border-bottom: 0; }
.satu-docrow:hover { background: var(--card); }
.satu-docrow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satu-permhead { display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(190px, 1.3fr) 104px; gap: var(--space-2); align-items: center; padding: 9px var(--space-3); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-permrow { display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(190px, 1.3fr) 104px; gap: var(--space-2); align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--border); }
.satu-permrow:last-child { border-bottom: 0; }
.satu-permrow:hover { background: var(--card); }
.satu-permrow > * { min-width: 0; }
.satu-dbmsg { max-width: 92%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.satu-dbmsg[data-role="user"] { align-self: flex-end; background: var(--color-accent-100); color: var(--color-accent-900); }
.satu-dbmsg[data-role="ai"] { align-self: flex-start; background: var(--card); border: 1px solid var(--border); }
.satu-ddl { margin: 0; padding: var(--space-3); background: var(--color-neutral-900); color: #e8eef2; border-radius: var(--radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.satu-attach { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--popover); font-size: 12px; color: var(--secondary-foreground); cursor: pointer; }
.satu-attach:hover { background: var(--secondary); color: var(--color-text); }
.satu-chip2 { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--popover); font-family: var(--font-body); font-size: 12.5px; color: var(--secondary-foreground); cursor: pointer; }
.satu-chip2:hover { border-color: var(--color-accent-400); background: var(--color-accent-100); color: var(--color-accent-800); }
.satu-card2 { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.satu-card2:hover { box-shadow: var(--shadow-sm); }
.satu-tablehead { display: grid; grid-template-columns: minmax(160px, 2.2fr) 72px 56px 104px 44px; gap: var(--space-2); align-items: center; padding: 9px var(--space-3); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-tablerow { display: grid; grid-template-columns: minmax(160px, 2.2fr) 72px 56px 104px 44px; gap: var(--space-2); align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--border); }
.satu-tablerow:last-child { border-bottom: 0; }
.satu-tablerow:hover { background: var(--card); }
.satu-tablerow > * { min-width: 0; }
.satu-billhead { display: grid; grid-template-columns: minmax(140px, 1.6fr) 104px 88px minmax(120px, 1.2fr) 120px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-billrow { display: grid; grid-template-columns: minmax(140px, 1.6fr) 104px 88px minmax(120px, 1.2fr) 120px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-billrow:last-child { border-bottom: 0; }
.satu-billrow:hover { background: var(--card); }
.satu-billrow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satu-usagehead { display: grid; grid-template-columns: minmax(160px, 2fr) 76px 96px 76px minmax(96px, 1fr); gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-usagerow { display: grid; grid-template-columns: minmax(160px, 2fr) 76px 96px 76px minmax(96px, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-usagerow:last-child { border-bottom: 0; }
.satu-usagerow:hover { background: var(--card); }
.satu-usagerow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 转人工待办那一页的行。列宽跟着「要人做什么」走——那一栏是人真正在扫的东西，
   其余几栏只要能一眼分辨就够。 */
.satu-handoffhead { display: grid; grid-template-columns: minmax(200px, 2.4fr) 88px 110px 130px 116px 150px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-handoffrow { display: grid; grid-template-columns: minmax(200px, 2.4fr) 88px 110px 130px 116px 150px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-handoffrow:last-child { border-bottom: 0; }
.satu-handoffrow:hover { background: var(--card); }
.satu-handoffrow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.satu-handoffrow .btn { padding: 5px 12px; font-size: 12px; }
/* 就地处理那张卡：整行宽，压在它那一行下面（那一行是 grid，卡片是它的兄弟节点）。 */
.satu-handoffpanel { padding: 0 var(--space-4) var(--space-3); border-bottom: 1px solid var(--border); background: var(--card); }
.satu-handoffpanel .sw-approval { background: var(--popover); }
/* 顶栏那颗按钮上的计数。**数字压在图标右上角**，不排在它旁边：顶栏那一行寸土寸金，
   而这个数为 0 时整个角标是不出现的（hidden），排在旁边会让按钮宽度跳一下。 */
.satu-handoffbell { position: relative; }
.satu-handoffcount {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  font-weight: 600;
}

.satu-agentpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); align-items: start; }
.satu-agenthead { display: grid; grid-template-columns: minmax(190px, 2.4fr) 80px 56px 56px 76px 112px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-agentrow { display: grid; grid-template-columns: minmax(190px, 2.4fr) 80px 56px 56px 76px 112px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-agentrow:last-child { border-bottom: 0; }
.satu-agentrow:hover { background: var(--card); }
.satu-agentitem { display: flex; align-items: center; gap: var(--space-3); width: 100%; box-sizing: border-box; padding: var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; font-family: var(--font-body); color: var(--color-text); cursor: pointer; }
.satu-agentitem:hover { background: var(--secondary); }
.satu-agentitem[aria-current="true"] { background: var(--color-accent-100); }
.satu-dot { width: 7px; height: 7px; flex: none; border-radius: 999px; background: var(--color-neutral-400); }
.satu-dot[data-on="true"] { background: var(--color-accent-2-600); }
.satu-iconpick { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--popover); color: var(--secondary-foreground); cursor: pointer; }
.satu-iconpick:disabled { cursor: default; opacity: 0.55; }
.satu-iconpick:hover { background: var(--secondary); color: var(--color-text); }
.satu-iconpick[aria-pressed="true"] { border-color: var(--color-accent-400); background: var(--color-accent-100); color: var(--color-accent-800); }
.satu-themecard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); font-family: var(--font-body); color: var(--color-text); cursor: pointer; }
.satu-themecard:hover { background: var(--secondary); }
.satu-themecard[aria-pressed="true"] { border-color: var(--color-accent-400); background: var(--color-accent-100); }
.satu-themeswatch { display: flex; flex-direction: column; width: 100%; height: 52px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.satu-themebar { height: 12px; }
.satu-themebody { flex: 1; }
.satu-themeswatch[data-mode="light"] .satu-themebar { background: #ebe8df; }
.satu-themeswatch[data-mode="light"] .satu-themebody { background: #faf9f5; }
.satu-themeswatch[data-mode="dark"] .satu-themebar { background: #26241f; }
.satu-themeswatch[data-mode="dark"] .satu-themebody { background: #171613; }
.satu-themeswatch[data-mode="system"] .satu-themebar { background: linear-gradient(90deg, #ebe8df 50%, #26241f 50%); }
.satu-themeswatch[data-mode="system"] .satu-themebody { background: linear-gradient(90deg, #faf9f5 50%, #171613 50%); }
.satu-toggleRow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.satu-panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.satu-panel-title { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); }
.satu-kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 13.5px; }
.satu-kv span:first-child { color: var(--muted-foreground); }
.satu-runhead { display: grid; grid-template-columns: 1.3fr 0.7fr 0.7fr 1.6fr 84px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-runrow { display: grid; grid-template-columns: 1.3fr 0.7fr 0.7fr 1.6fr 84px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.satu-runrow:last-child { border-bottom: 0; }
.satu-runrow:hover { background: var(--card); }
.satu-linkbtn { padding: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--color-accent-700); cursor: pointer; text-align: right; }
.satu-linkbtn:hover { color: var(--color-accent-600); }
.satu-danger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-accent-300); border-radius: var(--radius-lg); background: var(--color-accent-100); }
.satu-stat { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.satu-taskhead, .satu-taskhead { display: grid; grid-template-columns: 2.2fr 1fr 1.1fr 0.9fr 92px; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.satu-taskrow { display: grid; grid-template-columns: 2.2fr 1fr 1.1fr 0.9fr 92px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
/* 表格行里的 tag 是 grid item，inline-flex 管不住它，会被拉满整列。
   稿子上它是贴左的一小颗，所以在这里收住。 */
.satu-taskrow .tag, .satu-runrow .tag, .satu-modelrow .tag, .satu-provrow .tag,
.satu-agentrow .tag, .satu-memberrow .tag, .satu-toolrow .tag { justify-self: start; }
/* 放操作按钮的那一格不能裁剪：上面那条给单元格加省略号的规则
   （`.satu-taskrow > *  { overflow: hidden }`）会把弹出菜单一起切掉，
   菜单在 DOM 里好好的，就是看不见——最难查的那种。 */
.satu-taskrow > .satu-rowactions, .satu-runrow > .satu-rowactions,
.satu-modelrow > .satu-rowactions, .satu-provrow > .satu-rowactions,
.satu-agentrow > .satu-rowactions, .satu-memberrow > .satu-rowactions,
.satu-grouprow > .satu-rowactions, .satu-toolrow > .satu-rowactions,
.satu-usagerow > .satu-rowactions, .satu-billrow > .satu-rowactions,
.satu-embedrow > .satu-rowactions { overflow: visible; }
.satu-taskrow:last-child { border-bottom: 0; }
.satu-taskrow:hover { background: var(--card); }
.satu-switch { width: 34px; height: 20px; flex: none; padding: 2px; border: 0; border-radius: 999px; background: var(--color-neutral-400); cursor: pointer; display: flex; align-items: center; }
.satu-switch span { width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-2xs); transition: transform 140ms ease; }
.satu-switch[aria-pressed="true"] { background: var(--color-accent); }
.satu-switch[aria-pressed="true"] span { transform: translateX(14px); }
/* 对话气泡搬到 chat.css 了（.sw-msg / .sw-bubble / .sw-chips）。 */
.satu-avatar { width: 30px; height: 30px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.satu-step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted-foreground); }
.satu-step svg { color: var(--color-accent-600); flex: none; }
.satu-assignee { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--popover); font-family: var(--font-body); font-size: 13px; color: var(--secondary-foreground); cursor: pointer; }
.satu-assignee:hover { background: var(--secondary); }
.satu-assignee[aria-pressed="true"] { border-color: var(--color-accent-400); background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; }
.satu-prompt { width: 100%; box-sizing: border-box; border: 0; resize: none; background: transparent; font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--color-text); }
.satu-prompt::placeholder { color: var(--muted-foreground); }
.satu-prompt:focus-visible { outline: none; }
.satu-suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); font-family: var(--font-body); font-size: 13.5px; color: var(--color-text); cursor: pointer; }
.satu-suggest:hover { background: var(--secondary); }
.satu-chat { margin-top: auto; justify-content: center; width: 100%; border-radius: var(--radius-sm); }

/* 语言切换。取自登录稿的 helmet 样式——那份没在 Dashboard 稿里，所以补在这里。 */
.satu-lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.satu-lang button { border: 0; cursor: pointer; background: transparent; border-radius: 999px; padding: 4px 12px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.satu-lang button:hover { color: var(--color-accent-700); }
.satu-lang button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); }
.satu-lang button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* 禁用态。theme.css 只给了 .btn:disabled，输入框与开关也要有——一个能聚焦、
   看着能打字、实际打不进去的输入框，比灰掉的那个更让人困惑。 */
.input:disabled, .input[readonly] {
  background: var(--secondary); color: var(--muted-foreground);
  border-color: var(--border); cursor: not-allowed;
}
.satu-switch:disabled, .satu-assignee:disabled, .satu-themecard:disabled, .satu-linkbtn:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.satu-assignee:disabled:hover, .satu-themecard:disabled:hover { background: var(--popover); }

/* 表格卡的圆角。
   表头带底色、行 hover 也带底色，而外层容器没有 overflow 裁剪，于是方角直接盖在
   圆角上。给首尾两行补上对应的圆角，比给每个容器加 overflow: hidden 更稳——后者
   会把行内的弹出菜单一并裁掉（那个坑之前已经踩过一次）。 */
.satu-taskhead, .satu-agenthead, .satu-memberhead, .satu-grouphead, .satu-provhead,
.satu-modelhead, .satu-toolhead, .satu-runhead, .satu-usagehead, .satu-billhead, .satu-embedhead {
  border-top-left-radius: calc(var(--radius-lg) - 1px);
  border-top-right-radius: calc(var(--radius-lg) - 1px);
}
.satu-taskrow:last-child, .satu-agentrow:last-child, .satu-memberrow:last-child,
.satu-grouprow:last-child, .satu-provrow:last-child, .satu-modelrow:last-child,
.satu-toolrow:last-child, .satu-runrow:last-child, .satu-usagerow:last-child, .satu-billrow:last-child {
  border-bottom-left-radius: calc(var(--radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}