@hyzyn/dsh-docker 0.6.4 → 0.7.0

package/client-src/docker.css

@@ -0,0 +1,2180 @@
+/* eslint-disable */
+/**
+ * @hyzyn/dsh-docker — 面板样式表。
+ *
+ * 设计约定（改样式前先读这段）：
+ *   - 颜色/边框/阴影一律走 DSH 官方 token（--dsw-*），皮肤切换自动跟随；
+ *   - 几何（圆角 / 控件高度 / 间距）统一用 --dk-* 令牌，禁止在规则里写魔法数字；
+ *   - 三档层级：base（面板底）→ layer-2（栏 / 卡片底）→ layer-3（行 / 输入底）；
+ *   - 交互元素必须有 hover / active / :focus-visible / :disabled 四态；
+ *   - 状态色只用在徽章与进度条上，正文保持中性，避免彩色噪音。
+ *
+ * 由 scripts/build-client.mjs 以 text loader 内联进 client.js。
+ */
+
+/* ============================ 设计令牌 ============================ */
+
+/*
+ * 令牌声明在 :where(html, body) 上——不能只放 :root：DSH 的明暗主题挂在
+ * body[data-ds-dark-theme] 上覆盖 --dsw-*，而 var() 在「声明它的元素」上就
+ * 完成替换；只在 :root 声明会永远拿到浅色值。
+ */
+:where(html, body) {
+  --dk-r-xs: 4px;
+  --dk-r-sm: 6px;
+  --dk-r-md: 8px;
+  --dk-r-lg: 10px;
+  --dk-r-xl: 12px;
+  --dk-r-pill: 999px;
+  --dk-h-sm: 24px;
+  --dk-h-md: 28px;
+  --dk-h-lg: 32px;
+  --dk-gap-xs: 4px;
+  --dk-gap-sm: 6px;
+  --dk-gap-md: 8px;
+  --dk-gap-lg: 12px;
+  --dk-gap-xl: 16px;
+  /* 设置卡片标题行内边距：对齐 DSH 内置卡片 / 其他插件卡片（pM_pluginCard、tt_card） */
+  --dk-pad-cardHead: 14px 16px;
+  --dk-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --dk-ease: cubic-bezier(.2, .8, .2, 1);
+  --dk-dur: .16s;
+  --dk-accent: var(--dsw-alias-state-business-primary, #4d6bfe);
+  --dk-danger: var(--dsw-alias-state-error-primary, #d1242f);
+  --dk-success: var(--dsw-alias-state-success-primary, #1a7f37);
+  --dk-warn: var(--dsw-alias-state-warn-primary, #bf8700);
+  --dk-border: var(--dsw-alias-border-l1, rgba(127, 127, 127, .22));
+  --dk-border-strong: var(--dsw-alias-border-l2, rgba(127, 127, 127, .32));
+  --dk-hover: var(--dsw-alias-interactive-bg-hover, rgba(127, 127, 127, .1));
+  --dk-hover-solid: var(--dsw-alias-interactive-bg-hover-solid, rgba(127, 127, 127, .16));
+  --dk-label: var(--dsw-alias-label-primary, #1a1a1a);
+  --dk-label-2: var(--dsw-alias-label-secondary, #555);
+  --dk-label-dimmed: var(--dsw-alias-label-dimmed, var(--dk-label-3));
+  --dk-label-3: var(--dsw-alias-label-tertiary, #888);
+  --dk-surface: var(--dsw-alias-bg-base, #fff);
+  --dk-surface-solid: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-base, #fff));
+  --dk-surface-2: var(--dsw-alias-bg-layer-2, #f2f2f2);
+  --dk-surface-3: var(--dsw-alias-bg-layer-3, #e8e8e8);
+  --dk-input: var(--dsw-specific-input-major, var(--dsw-alias-bg-base, #fff));
+  --dk-shadow: 0 16px 40px -12px rgba(0, 0, 0, .32), var(--dsw-shadow-lv3, 0 4px 12px rgba(0, 0, 0, .12));
+  --dk-shadow-lg: 0 32px 72px -24px rgba(0, 0, 0, .48), 0 2px 8px rgba(0, 0, 0, .16);
+  --dk-ring: 0 0 0 2px color-mix(in srgb, var(--dk-accent) 42%, transparent);
+  --dk-log-bg: #0b0e14;
+  --dk-log-fg: #d7dce5;
+}
+
+/* ============================ 通用 ============================ */
+
+.dk_backdrop ::selection,
+.dk_card ::selection {
+  background: color-mix(in srgb, var(--dk-accent) 32%, transparent);
+}
+
+.dk_backdrop *,
+.dk_card *,
+[data-dsh-docker-entry] {
+  scrollbar-width: thin;
+  scrollbar-color: var(--dk-border-strong) transparent;
+}
+
+.dk_backdrop *::-webkit-scrollbar,
+.dk_card *::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.dk_backdrop *::-webkit-scrollbar-thumb,
+.dk_card *::-webkit-scrollbar-thumb {
+  background: var(--dk-border-strong);
+  border: 3px solid transparent;
+  border-radius: var(--dk-r-pill);
+  background-clip: content-box;
+}
+
+/* ============================ 侧边栏入口 ============================ */
+
+[data-dsh-docker-entry] {
+  position: relative;
+  /* 与 tty 侧边栏入口同因：宿主无全局 box-sizing reset，width:100% + 左右 padding
+     在 content-box 下会比容器宽 24px，多出的右侧会被侧边栏裁掉（hover 底色缺一角）。 */
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-md);
+  width: 100%;
+  min-width: 0;
+  height: var(--dk-h-lg);
+  padding: 0 var(--dk-gap-lg);
+  border-radius: var(--dk-r-md);
+  color: var(--dk-label-2);
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease);
+}
+
+[data-dsh-docker-entry]:hover {
+  background: var(--dk-hover);
+  color: var(--dk-label);
+}
+
+[data-dsh-docker-entry]:focus-visible {
+  outline: none;
+  box-shadow: var(--dk-ring);
+}
+
+.dk_entryIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  color: currentColor;
+}
+
+.dk_entryLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 侧边栏折叠（DSH 外壳在祖先元素上打 data-sidebar-collapsed）：只留图标，
+   与 tty 的终端入口同形——否则标签会从窄栏里溢出一条竖条 */
+[data-sidebar-collapsed] [data-dsh-docker-entry] {
+  justify-content: center;
+  width: 100%;
+  /* 折叠 rail 里宿主的行是 36×36，跟齐（与 tty 入口一致） */
+  height: 36px;
+  padding: 0;
+  margin: 0;
+}
+
+[data-sidebar-collapsed] .dk_entryLabel {
+  display: none;
+}
+
+[data-sidebar-collapsed] .dk_entryBadge {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.dk_entryBadge {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dk-gap-xs);
+  font-size: 11px;
+  color: var(--dk-label-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.dk_entryDot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--dk-r-pill);
+  background: var(--dk-label-3);
+}
+
+.dk_entryDot[data-state="ok"] { background: var(--dk-success); }
+.dk_entryDot[data-state="error"] { background: var(--dk-danger); }
+.dk_entryDot[data-state="loading"] { background: var(--dk-warn); }
+
+/* ============================ 弹窗骨架 ============================ */
+
+.dk_backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 2140;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(8px, 3vh, 32px);
+  background: color-mix(in srgb, #000 42%, transparent);
+  backdrop-filter: blur(2px);
+  animation: dk_fade var(--dk-dur) var(--dk-ease);
+}
+
+@keyframes dk_fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.dk_panel {
+  display: flex;
+  flex-direction: column;
+  width: min(1180px, 100%);
+  height: min(820px, 100%);
+  min-height: 420px;
+  overflow: hidden;
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-xl);
+  background: var(--dk-surface-solid);
+  color: var(--dk-label);
+  box-shadow: var(--dk-shadow-lg);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/*
+ * 嵌入式承载：面板长在别人的栏里，撑满宿主即可——外框 / 圆角 / 阴影 / 最小高度都是
+ * 「独立弹窗」的装饰，挂在别人栏里要全去掉。
+ *   .dk_panelDock —— tty 面板的右侧挂载位（0.3.0）
+ *   .dk_panelTab  —— 会话右侧栏的标签（S1）
+ */
+.dk_panelDock,
+.dk_panelTab {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* ---- 交互式终端抽屉（ttyTerminal.mount 就地嵌入，0.15.0） ---- */
+.dk_drawer {
+  position: relative; /* 顶部拖拽条的定位基准 */
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  height: min(46%, 380px);
+  min-height: 180px;
+  border-top: 1px solid var(--dk-border-strong);
+  background: var(--dk-surface-2);
+  animation: dk_drawerIn var(--dk-dur) var(--dk-ease);
+}
+
+/* 拖拽条：贴着抽屉上沿，鼠标进入才显形（常态不打扰终端内容） */
+.dk_drawerResize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  height: 5px;
+  cursor: ns-resize;
+}
+
+.dk_drawerResize:hover { background: color-mix(in srgb, var(--dk-accent) 55%, transparent); }
+
+/*
+ * 折叠：只把抽屉压到标题栏高度（正文隐藏），**不卸载**挂载点——tty 那边的
+ * xterm 与 PTY 会话照旧跑着，展开即原样回来。
+ */
+.dk_drawer[data-collapsed="1"] {
+  height: auto; /* 只剩标题栏（正文 display:none），别写死高度：header 是内容盒 + 内边距 */
+  min-height: 0;
+}
+
+.dk_drawer[data-collapsed="1"] .dk_drawerResize,
+.dk_drawer[data-collapsed="1"] .dk_drawerBody { display: none; }
+
+.dk_drawerFold .dk_iconGlyph { transition: transform var(--dk-dur) var(--dk-ease); }
+.dk_drawer[data-collapsed="1"] .dk_drawerFold .dk_iconGlyph { transform: rotate(180deg); }
+
+@keyframes dk_drawerIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+
+.dk_drawerHead {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-md);
+  flex: 0 0 auto;
+  min-height: 34px;
+  padding: var(--dk-gap-xs) var(--dk-gap-lg);
+  border-bottom: 1px solid var(--dk-border);
+}
+
+.dk_drawerIcon {
+  display: inline-flex;
+  flex: none;
+  color: var(--dk-accent);
+}
+
+.dk_drawerTitle {
+  min-width: 0;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dk_drawerHint {
+  flex: none;
+  color: var(--dk-label-3);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+/* 挂载点：tty 会往里塞一个绝对定位的 .tt_term（复用终端面板同一套样式） */
+.dk_drawerBody {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  background: var(--dk-log-bg);
+}
+
+.dk_header {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-md);
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  min-height: 44px;
+  padding: var(--dk-gap-sm) var(--dk-gap-lg);
+  border-bottom: 1px solid var(--dk-border);
+  background: var(--dk-surface-2);
+}
+
+/* 详情头：返回 + 容器名 + 状态 + 目标主机 +（日志页工具条）+ 关闭 */
+.dk_headerDetail { gap: var(--dk-gap-sm); }
+
+.dk_logTools {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  flex-wrap: wrap;
+}
+
+.dk_titleIcon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--dk-accent);
+}
+
+.dk_title {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: .2px;
+}
+
+.dk_headerSpacer { flex: 1 1 auto; }
+
+.dk_iconBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dk-h-md);
+  height: var(--dk-h-md);
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--dk-r-sm);
+  background: transparent;
+  color: var(--dk-label-2);
+  cursor: pointer;
+  transition: background var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease), opacity var(--dk-dur) var(--dk-ease);
+}
+
+.dk_iconBtn:hover { background: var(--dk-hover); color: var(--dk-label); }
+.dk_iconBtn:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+.dk_iconBtn:disabled { opacity: .45; cursor: not-allowed; }
+
+/*
+ * 刷新中的图标自己转（data-spin 由各处的 refresh 按钮按 loading 打）：
+ * 比在按钮旁边另挂一个独立 spinner 直观——用户刚点的就是这颗。
+ */
+.dk_iconBtn[data-spin="1"] { color: var(--dk-accent); }
+.dk_iconBtn[data-spin="1"] > span { animation: dk_spin .8s linear infinite; }
+
+/* ============================ 工具栏 ============================ */
+
+.dk_toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-md);
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  padding: var(--dk-gap-md) var(--dk-gap-lg);
+  border-bottom: 1px solid var(--dk-border);
+}
+
+/*
+ * dock 模式下没有面板头部，刷新 / 只读徽标挂到工具条末尾并靠右：
+ * margin-left:auto 在不换行时把它推到整行最右，换行时贴到最后一行的右端——
+ * 与「过滤 / 筛选控件从左往右排」区分开，避免刷新被当成工具条的第一个筛选项。
+ */
+.dk_toolbarEnd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  margin-left: auto;
+}
+
+.dk_select,
+.dk_input {
+  height: var(--dk-h-lg);
+  padding: 0 var(--dk-gap-md);
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-sm);
+  background: var(--dk-input);
+  color: var(--dk-label);
+  font-size: 13px;
+  font-family: inherit;
+  transition: border-color var(--dk-dur) var(--dk-ease), box-shadow var(--dk-dur) var(--dk-ease);
+}
+
+/*
+ * 输入框一律可收缩：以前这里是 min-width: 180px，遇到窄容器（设置面板 ~600px 时
+ * 每列只有 ~180px）会把列撑破、和隔壁字段叠在一起。宽度交给容器的栅格/弹性布局决定。
+ */
+.dk_input { min-width: 0; }
+.dk_select:focus-visible,
+.dk_input:focus-visible {
+  outline: none;
+  border-color: var(--dk-accent);
+  box-shadow: var(--dk-ring);
+}
+
+/*
+ * 搜索框是工具条里唯一可伸缩的项，它的 min-width 决定了「放不下时先挤谁」：给到 160px 时
+ * 空隙不够，浏览器宁可把末尾那个开关单独换行，也不肯把搜索框压窄一点——宽面板里因此多出
+ * 一行只有一个复选框。120px 让它先瘦下来兜住这点差距（flex-grow 仍是 1：空间富余时它照旧
+ * 填满整行，视觉宽度不变）。
+ */
+.dk_search { flex: 1 1 120px; min-width: 120px; }
+
+/* 工具条里的结果计数（镜像：23 / 23 个镜像）：别被压缩，数字等宽 */
+.dk_searchCount { flex: none; font-variant-numeric: tabular-nums; }
+
+.dk_seg {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--dk-border);
+  border-radius: var(--dk-r-md);
+  background: var(--dk-surface-2);
+  /*
+   * 分段从三段长到五段（容器/镜像/Compose/网络/卷）后，520px 的 dock 窄栏里可能放不下：
+   * 允许这一段自己横向滚动，而不是整个工具条换行或做二级菜单（切页是高频动作，
+   * 多一次点击不划算）。滚动条隐藏，靠两端的裁切给出「还有内容」的暗示。
+   */
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.dk_seg::-webkit-scrollbar { display: none; }
+
+.dk_segBtn {
+  /* 不参与压缩：否则窄栏里五段会被压成「容/镜/Co/网/卷」这种半截字 */
+  flex: none;
+  height: var(--dk-h-sm);
+  padding: 0 var(--dk-gap-md);
+  border: none;
+  border-radius: var(--dk-r-xs);
+  background: transparent;
+  color: var(--dk-label-2);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease);
+}
+
+.dk_segBtn:hover { color: var(--dk-label); }
+/*
+ * 选中态**不能**用 --dk-surface-solid：它和分段条底色的 --dk-surface-2 解析到**同一个**宿主令牌
+ * （`--dsw-alias-bg-layer-2`），暗色下两者完全同色，只剩那层 1px 阴影可辨 —— 用户实测「暗色下选中
+ * 看不清」（浅色下能看见，靠的也只是阴影）。
+ *
+ * 改走**强调色淡染**：与 .dk_pillPick / .dk_pillFollow 的选中语言一致，靠色彩差而不是靠阴影，
+ * 两种主题下都可辨；文字仍用 --dk-label（不改强调色），避免 12px 小字撞对比度。
+ * 由 client-smoke 守「不得回到同底色」。
+ */
+.dk_segBtn[data-on="1"] {
+  background: color-mix(in srgb, var(--dk-accent) 18%, transparent);
+  color: var(--dk-label);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
+}
+
+.dk_check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  font-size: 12px;
+  color: var(--dk-label-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.dk_check input { accent-color: var(--dk-accent); }
+
+/*
+ * 工具条末尾的两个开关（含已停止 / 自动刷新）成组：它们是一个「开关簇」，工具条在宽面板里
+ * 恰好卡在放得下与放不下的边界上——分开排时最后一个会被单独挤到第二行（一行只有一个复选
+ * 框）。成组后换行以组为单位，最坏情况也是一整组一起下去。
+ */
+.dk_toolbarToggles {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dk-gap-md);
+}
+
+/* ============================ 按钮 ============================ */
+
+.dk_btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dk-gap-sm);
+  height: var(--dk-h-md);
+  padding: 0 var(--dk-gap-lg);
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-sm);
+  background: var(--dk-surface-solid);
+  color: var(--dk-label);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--dk-dur) var(--dk-ease), border-color var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease);
+}
+
+.dk_btn:hover { background: var(--dk-hover); }
+.dk_btn:active { background: var(--dk-hover-solid); }
+.dk_btn:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+.dk_btn:disabled { opacity: .45; cursor: not-allowed; }
+
+.dk_btnPrimary {
+  border-color: transparent;
+  background: var(--dk-accent);
+  color: #fff;
+}
+
+.dk_btnPrimary:hover { background: color-mix(in srgb, var(--dk-accent) 86%, #000); }
+
+.dk_btnDanger { border-color: color-mix(in srgb, var(--dk-danger) 40%, transparent); color: var(--dk-danger); }
+.dk_btnDanger:hover { background: color-mix(in srgb, var(--dk-danger) 12%, transparent); }
+
+/* ============================ 主体 / 容器卡片 ============================ */
+
+.dk_body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  /* 过渡浮层与顶部进度条的定位基准 */
+  position: relative;
+}
+
+.dk_main {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: auto;
+  padding: var(--dk-gap-lg);
+}
+
+.dk_grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--dk-gap-lg);
+  /* 切目标时数据整批换掉：淡入 + 轻微上移，让「换了一批内容」看得见 */
+  animation: dk_dataIn .2s var(--dk-ease) both;
+}
+
+/*
+ * 「正在切目标」：正文压暗 + 锁住指针（pointer-events: none 只挡内容，外层 .dk_main
+ * 仍可滚动）。保留可读是刻意的——比起白屏，用户更希望还能看着刚才那批卡片，
+ * 只是知道「这不是新目标的」、此时点不动。
+ */
+/*
+ * 「正在切目标」的旧数据：82% + 轻度去色，而不是 42% 纯压暗。
+ * 语义差别——42% 读作「坏了 / 被禁用」，82% + 去色读作「这是另一批内容」，
+ * 与「正在换一批数据」是一回事；可读性也保住（还要能看清容器名）。
+ * pointer-events: none 是安全底线：不加锁时点「停止」会拿新目标当目标、
+ * 用旧列表的容器 ID 发命令。
+ */
+.dk_body[data-stale="1"] .dk_main {
+  opacity: .82;
+  filter: saturate(.55);
+  pointer-events: none;
+  user-select: none;
+}
+
+.dk_body .dk_main {
+  transition: opacity var(--dk-dur) var(--dk-ease), filter var(--dk-dur) var(--dk-ease);
+}
+
+/*
+ * 正文顶部的过渡层：一条 2px 流光进度条（::before）+ 一枚居中的蓝色状态胶囊。
+ * 绝对定位 → 不占文档流，切换时首卡位置与滚动高度都不变；自身不吃指针事件（不挡滚动）。
+ */
+.dk_switchOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 4;
+  display: flex;
+  justify-content: center;
+  padding-top: var(--dk-gap-sm);
+  pointer-events: none;
+}
+
+/* 顶部 2px 不定长进度条：面板级「正在取数」信号 */
+.dk_switchOverlay::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-image: linear-gradient(90deg, transparent, var(--dk-accent), transparent);
+  background-size: 35% 100%;
+  background-repeat: no-repeat;
+  animation: dk_indeterminate 1.15s linear infinite;
+}
+
+/* 状态胶囊：蓝色（强调色）表达「进行中」，底色是强调色掺入当前表面 */
+.dk_switchPill {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  flex: none;
+  min-width: 0;
+  max-width: min(400px, 38vw);
+  padding: 4px var(--dk-gap-lg);
+  border: 1px solid color-mix(in srgb, var(--dk-accent) 42%, transparent);
+  border-radius: var(--dk-r-pill);
+  background: color-mix(in srgb, var(--dk-accent) 12%, var(--dk-surface-solid));
+  backdrop-filter: blur(6px);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
+  font-size: 12px;
+  color: var(--dk-accent);
+}
+
+.dk_switchText {
+  display: flex;
+  align-items: baseline;
+  gap: var(--dk-gap-sm);
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dk_switchText strong { color: var(--dk-accent); font-weight: 600; }
+/* 「·」与「当前显示：」稍微压淡一点，与两个目标名区分层次（仍在蓝色系内） */
+.dk_switchDot,
+.dk_switchSub { color: color-mix(in srgb, var(--dk-accent) 72%, var(--dk-label-2)); }
+.dk_switchName { color: var(--dk-accent); }
+.dk_spinSm { width: 10px; height: 10px; color: var(--dk-accent); }
+
+/* 进入：8px 上滑 + 淡入，让「换了一批内容」有方向感（不是闪一下） */
+@keyframes dk_dataIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+
+@keyframes dk_indeterminate {
+  from { background-position: -40% 0; }
+  to { background-position: 140% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dk_grid { animation: none; }
+  .dk_switchOverlay::before { animation: none; background-position: 50% 0; }
+  .dk_body .dk_main { transition: none; }
+}
+
+.dk_card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dk-gap-sm);
+  padding: var(--dk-gap-lg);
+  border: 1px solid var(--dk-border);
+  border-radius: var(--dk-r-lg);
+  background: var(--dk-surface-solid);
+  cursor: pointer;
+  transition: border-color var(--dk-dur) var(--dk-ease), box-shadow var(--dk-dur) var(--dk-ease), transform var(--dk-dur) var(--dk-ease);
+}
+
+.dk_card:hover {
+  border-color: var(--dk-border-strong);
+  box-shadow: var(--dk-shadow);
+}
+
+.dk_card:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+
+.dk_card[data-selected="1"] {
+  border-color: var(--dk-accent);
+  box-shadow: var(--dk-ring);
+}
+
+.dk_cardHead {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  min-width: 0;
+}
+
+.dk_cardName {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dk_cardRows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dk-gap-xs);
+  margin-top: var(--dk-gap-xs);
+}
+
+.dk_cardRow {
+  display: grid;
+  grid-template-columns: 44px 1fr;
+  gap: var(--dk-gap-md);
+  align-items: baseline;
+  font-size: 12px;
+}
+
+.dk_cardLabel {
+  color: var(--dk-label-3);
+}
+
+.dk_cardValue {
+  min-width: 0;
+  color: var(--dk-label-2);
+  font-family: var(--dk-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dk_actionBar {
+  display: flex;
+  gap: var(--dk-gap-xs);
+  margin-top: var(--dk-gap-sm);
+  padding-top: var(--dk-gap-sm);
+  border-top: 1px solid var(--dk-border);
+}
+
+.dk_actionBar .dk_iconBtn {
+  border: 1px solid var(--dk-border);
+  background: var(--dk-surface-2);
+}
+
+.dk_actionBar .dk_iconBtn:hover:not(:disabled) {
+  background: var(--dk-hover-solid);
+  color: var(--dk-label);
+}
+
+/* 「查看」与「变更」两组之间的竖线分隔 */
+.dk_actionBarSep {
+  flex: none;
+  width: 1px;
+  margin: 4px var(--dk-gap-sm);
+  background: var(--dk-border-strong);
+}
+
+/* 删除是破坏性且不可恢复：在变更组内再额外留一点距离，别和「重启」挨着点错 */
+.dk_actionBar .dk_iconBtnDanger {
+  margin-left: var(--dk-gap-xs);
+}
+
+.dk_iconBtnDanger { color: var(--dk-danger); }
+.dk_iconBtnDanger:hover:not(:disabled) { background: color-mix(in srgb, var(--dk-danger) 14%, transparent); }
+
+.dk_iconGlyph { display: inline-flex; align-items: center; }
+
+/* ============================ 徽章 ============================ */
+
+.dk_badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dk-gap-xs);
+  height: 20px;
+  padding: 0 var(--dk-gap-sm);
+  border-radius: var(--dk-r-pill);
+  border: 1px solid var(--dk-border-strong);
+  background: var(--dk-surface-2);
+  color: var(--dk-label-2);
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+  /* 启停后状态徽标会从「运行中」翻到「已停止」：给个过渡，别硬切 */
+  transition: background-color var(--dk-dur) var(--dk-ease), border-color var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease);
+}
+
+.dk_badge::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: var(--dk-r-pill);
+  background: currentColor;
+  opacity: .8;
+}
+
+.dk_badge[data-state="running"] { color: var(--dk-success); border-color: color-mix(in srgb, var(--dk-success) 36%, transparent); background: color-mix(in srgb, var(--dk-success) 10%, transparent); }
+.dk_badge[data-state="exited"] { color: var(--dk-label-3); }
+.dk_badge[data-state="paused"] { color: var(--dk-warn); border-color: color-mix(in srgb, var(--dk-warn) 36%, transparent); background: color-mix(in srgb, var(--dk-warn) 10%, transparent); }
+.dk_badge[data-state="restarting"] { color: var(--dk-warn); }
+.dk_badge[data-state="dead"] { color: var(--dk-danger); border-color: color-mix(in srgb, var(--dk-danger) 36%, transparent); background: color-mix(in srgb, var(--dk-danger) 10%, transparent); }
+.dk_badge[data-state="unhealthy"] { color: var(--dk-danger); }
+.dk_badge[data-state="created"] { color: var(--dk-label-2); }
+.dk_badge[data-state="unknown"] { color: var(--dk-label-3); }
+
+.dk_tag {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 var(--dk-gap-sm);
+  border-radius: var(--dk-r-xs);
+  background: var(--dk-surface-3);
+  color: var(--dk-label-2);
+  font-size: 11px;
+}
+
+/* 需关注原因徽标（总览异常表） */
+.dk_reasons { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+
+.dk_reason {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: var(--dk-r-xs);
+  background: var(--dk-surface-3);
+  color: var(--dk-label-2);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.dk_reason[data-reason="oom"] { background: color-mix(in srgb, var(--dk-danger) 18%, transparent); color: var(--dk-danger); }
+.dk_reason[data-reason="dead"] { background: color-mix(in srgb, var(--dk-danger) 14%, transparent); color: var(--dk-danger); }
+.dk_reason[data-reason="unhealthy"] { background: color-mix(in srgb, var(--dk-danger) 12%, transparent); color: var(--dk-danger); }
+.dk_reason[data-reason="restarting"] { background: color-mix(in srgb, var(--dk-warn) 16%, transparent); color: var(--dk-warn); }
+.dk_reason[data-reason="exit-nonzero"] { background: color-mix(in srgb, var(--dk-warn) 12%, transparent); color: var(--dk-warn); }
+
+/* ============================ 容器详情（整栏） ============================ */
+
+.dk_detail {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+
+.dk_detailTitle {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dk_detailSub {
+  flex: none;
+  color: var(--dk-label-3);
+  font-size: 11px;
+  font-family: var(--dk-mono);
+}
+
+.dk_tabs {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-xs);
+  flex: 0 0 auto;
+  flex-wrap: wrap; /* 窄面板下过滤行换行，而不是把右侧控件裁掉（D60） */
+  padding: 0 var(--dk-gap-lg);
+  border-bottom: 1px solid var(--dk-border);
+}
+
+.dk_filterBar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-md);
+  flex: 1 1 auto;
+  flex-wrap: wrap; /* LINES + 三个 pill + 级别 + 两个导出 chip + 计数槽放不下时换行（D60） */
+  min-width: 0;
+  /* 右侧给计数留固定槽（92px ≈ 4 位数 + 「行匹配」），输入框宽度因此恒定 */
+  padding: var(--dk-gap-xs) 92px var(--dk-gap-xs) 0;
+}
+
+/**
+ * 同一条过滤行挂在两处，伸缩轴不同，必须分开对待：
+ *   - 单容器日志：它在 `.dk_tabs`（横向行）里，`flex: 1 1 auto` 是「横向占满剩余宽度」，正确；
+ *   - 聚合日志（ComposeLogs）：它是 `.dk_logs`（纵向 flex）的直接子项，此时 `flex: 1 1 auto`
+ *     会变成**纵向撑高**——过滤到少量行时日志体基准高度变小、剩余空间出现，工具条与
+ *     `.dk_logBody` 各分一半，整条工具条长成两百多像素的横条（输入框垂直居中、状态行被
+ *     顶到下面），也就是「输入文字后界面变形」。工具条是固定高度的一行，不该参与纵向伸缩。
+ */
+.dk_logs > .dk_filterBar { flex: 0 0 auto; }
+
+.dk_tab {
+  height: var(--dk-h-lg);
+  padding: 0 var(--dk-gap-md);
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--dk-label-2);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.dk_tab:hover { color: var(--dk-label); }
+.dk_tab[data-on="1"] { color: var(--dk-label); border-bottom-color: var(--dk-accent); }
+
+.dk_detailBody {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: var(--dk-gap-lg);
+}
+
+/* ============================ 日志视图 ============================ */
+
+.dk_logs {
+  position: relative; /* 「回到底部」浮层定位基准 */
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: calc(-1 * var(--dk-gap-lg));
+}
+
+
+.dk_toolLabel {
+  color: var(--dk-label-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: .4px;
+}
+
+.dk_selectSm { height: var(--dk-h-md); padding: 0 var(--dk-gap-sm); font-size: 12px; }
+
+.dk_pill {
+  min-width: 44px;
+  height: var(--dk-h-md);
+  padding: 0 var(--dk-gap-md);
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-pill);
+  background: var(--dk-surface-2);
+  color: var(--dk-label-3);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease), border-color var(--dk-dur) var(--dk-ease);
+}
+
+.dk_pill:hover { background: var(--dk-hover); }
+.dk_pill:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+
+.dk_pill[data-on="1"] {
+  border-color: color-mix(in srgb, var(--dk-success) 46%, transparent);
+  background: color-mix(in srgb, var(--dk-success) 16%, transparent);
+  color: var(--dk-success);
+  font-weight: 600;
+}
+
+/* 「聚合选择」激活态：这是「进入选择模式」而不是「某个开关已开」，用强调色 */
+.dk_pillPick[data-on="1"] {
+  border-color: color-mix(in srgb, var(--dk-accent) 52%, transparent);
+  background: color-mix(in srgb, var(--dk-accent) 18%, transparent);
+  color: var(--dk-accent);
+  font-weight: 600;
+}
+
+/* FOLLOW 激活态用强调色（与 AUTO REFRESH 的成功绿区分开：实时流在推 vs 轮询开着） */
+.dk_pillFollow[data-on="1"] {
+  border-color: color-mix(in srgb, var(--dk-accent) 52%, transparent);
+  background: color-mix(in srgb, var(--dk-accent) 18%, transparent);
+  color: var(--dk-accent);
+}
+
+.dk_pill:disabled {
+  opacity: .45;
+  cursor: not-allowed;
+}
+
+.dk_pill:disabled:hover { background: var(--dk-surface-2); }
+
+/* FOLLOW 连接状态行：小圆点 + 文案（连接错误只在这里表达，不弹横幅刷屏） */
+.dk_followState {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  flex: 0 0 auto;
+  padding: var(--dk-gap-xs) var(--dk-gap-lg);
+  border-bottom: 1px solid var(--dk-border);
+  background: var(--dk-surface-2);
+  color: var(--dk-label-3);
+  font-size: 11px;
+}
+
+.dk_followState::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--dk-label-3);
+}
+
+.dk_followState[data-state="open"]::before { background: var(--dk-success); }
+.dk_followState[data-state="connecting"]::before,
+.dk_followState[data-state="reconnecting"]::before { background: var(--dk-warn); }
+.dk_followState[data-state="closed"]::before { background: var(--dk-danger); }
+
+/* FOLLOW 暂停自动滚动时的「回到底部」浮层（不占布局，出现/消失不挤动日志） */
+.dk_backToBottom {
+  position: absolute;
+  right: var(--dk-gap-lg);
+  bottom: var(--dk-gap-lg);
+  z-index: 2;
+  height: var(--dk-h-md);
+  padding: 0 var(--dk-gap-md);
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-pill);
+  background: var(--dk-surface-2);
+  color: var(--dk-label);
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
+}
+
+.dk_backToBottom:hover { background: var(--dk-hover-solid); }
+.dk_backToBottom:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+
+
+/* 过滤输入框常驻；清空按钮浮在框内右侧（绝对定位 → 出现/消失都不挤动布局） */
+.dk_filterWrap {
+  position: relative;
+  display: flex;
+  flex: 1 1 200px;
+  min-width: 0;
+  /* 换行后唯一可缩的是输入框：给个下限，别在窄面板塌成 0 宽（D60） */
+  min-width: 140px;
+}
+
+.dk_filterInput {
+  flex: 1 1 auto;
+  height: var(--dk-h-md);
+  min-width: 0;
+  /* 常驻右侧内边距给清除按钮留位：内边距跟着内容变会改 flex 基准，反而挤动输入框 */
+  padding-right: 28px;
+}
+
+.dk_filterClear {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: var(--dk-r-sm);
+  background: transparent;
+  color: var(--dk-label-3);
+  cursor: pointer;
+}
+
+.dk_filterClear:hover { background: var(--dk-hover); color: var(--dk-label); }
+.dk_filterClear:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+/* 计数（「201 行」/「1 / 201 行匹配」）右对齐在固定槽里：文案变长也不会把输入框挤动 */
+.dk_filterCount {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  color: var(--dk-label-3);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.dk_logBody {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--dk-gap-md) var(--dk-gap-lg);
+  background: var(--dk-log-bg);
+  color: var(--dk-log-fg);
+  font-family: var(--dk-mono);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.dk_logLine {
+  white-space: pre-wrap;
+  word-break: break-word;
+  /*
+   * 这里**刻意不用** content-visibility / contain-intrinsic-size（D91）。
+   *
+   * D63 曾用 content-visibility 跳过视口外行的布局绘制，并用 contain-intrinsic-size
+   * 给未渲染的行兜一个估算高度（19px）；代价是 `scrollHeight` 从此变成**估算值** ——
+   * 未渲染行按 19px 算，而折长的行实际 38px 起。FOLLOW 的整套贴底判定都建立在精确
+   * 高度上：
+   *   body.scrollTop = body.scrollHeight                                    （贴底）
+   *   scrollHeight - scrollTop - clientHeight < 24                          （判断用户是否上滚）
+   * 结果是贴底到不了底、自动跟随被误判成「用户上滚了」而静默停止、「回到底部」也回不到底 ——
+   * FOLLOW 的全部价值（贴着看最新行）直接归零，单容器与聚合两条路径同时中招。
+   *
+   * 于是 D63 的性能优化只保留 `logStats` 的 useMemo（见 index.js 的 logStatsValue），
+   * 恢复精确的 scrollHeight；真窗口化（DOM 节点数与缓冲行数解耦，不再依赖估算高度）
+   * 见 DEFECTS.md 待办「日志渲染性能（D63 的根治）」，落地前不要在这里再开 content-visibility。
+   */
+}
+
+.dk_logLine mark {
+  background: color-mix(in srgb, var(--dk-warn) 62%, transparent);
+  color: inherit;
+  border-radius: 2px;
+}
+
+.dk_logLevel {
+  margin-right: var(--dk-gap-sm);
+  font-weight: 600;
+}
+
+.dk_logLevel[data-level="TRACE"] { color: #8a93a5; }
+.dk_logLevel[data-level="DEBUG"] { color: #8a93a5; }
+.dk_logLevel[data-level="INFO"] { color: #6ea8fe; }
+.dk_logLevel[data-level="WARN"] { color: #e0a94a; }
+.dk_logLevel[data-level="ERROR"] { color: #ff6b6b; }
+.dk_logLevel[data-level="FATAL"] { color: #ff6b6b; font-weight: 700; }
+
+.dk_logTs { margin-right: var(--dk-gap-sm); color: #7f8899; }
+.dk_logText { color: inherit; }
+.dk_logMore { color: #7f8899; font-style: italic; }
+
+/* ------------------------------------------------------------------ *
+ * 日志 → 会话桥：右键菜单 / 预览卡片 / 失败提示
+ *
+ * 三者都挂在 document.body 上，而不是面板的 React 树里：`.dk_logBody` 是
+ * overflow:auto，内联渲染会跟着日志一起滚走；而宿主只向浏览器半体注入
+ * react / react/jsx-runtime / react-dom/client，没有 react-dom，也就拿不到
+ * createPortal。好在 `--dk-*` 令牌声明在 `:where(html, body)` 上，body 下的
+ * 浮层自动继承，不必搬令牌。
+ *
+ * z-index 必须高于 `.dk_backdrop` 的 2140：模态形态下面板整个在 backdrop 里，
+ * 菜单挂到 body 后若低于它就会被盖住、点不出来。
+ * ------------------------------------------------------------------ */
+
+.dk_menu {
+  position: fixed;
+  z-index: 2160;
+  min-width: 220px;
+  max-width: 320px;
+  padding: var(--dk-gap-xs);
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-md);
+  background: var(--dk-surface-solid);
+  box-shadow: var(--dk-shadow);
+  color: var(--dk-label);
+  font-size: 12px;
+}
+
+.dk_menuHead { padding: 6px 8px 2px; font-weight: 600; }
+.dk_menuSub {
+  padding: 0 8px 6px;
+  color: var(--dk-label-3);
+  font-size: 11px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.dk_menuItem {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: var(--dk-r-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.dk_menuItem:hover:not(:disabled) { background: var(--dk-hover); }
+.dk_menuItem:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+.dk_menuItem:disabled { cursor: not-allowed; }
+.dk_menuItem:disabled .dk_menuItemLabel { color: var(--dk-label-3); }
+.dk_menuItemHint { color: var(--dk-label-3); font-size: 11px; }
+
+.dk_menuNote {
+  margin-top: var(--dk-gap-xs);
+  padding: 6px 8px 2px;
+  border-top: 1px solid var(--dk-border);
+  color: var(--dk-label-3);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.dk_askToast {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 2180;
+  max-width: 420px;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--dk-danger) 40%, transparent);
+  border-radius: var(--dk-r-md);
+  background: var(--dk-surface-solid);
+  box-shadow: var(--dk-shadow);
+  color: var(--dk-danger);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+/* 成功回执：同一枚 toast 换配色（默认那套是「失败」的红） */
+.dk_askToast[data-kind="ok"] {
+  border-color: color-mix(in srgb, var(--dk-success) 42%, transparent);
+  color: var(--dk-success);
+}
+
+/* 键值行 */
+.dk_kv {
+  display: grid;
+  grid-template-columns: 92px 1fr;
+  gap: var(--dk-gap-xs) var(--dk-gap-md);
+  font-size: 12px;
+}
+
+.dk_kvKey { color: var(--dk-label-3); }
+/* pre-line（D59）：多行值（多挂载 / 多网络 / 多标签）保留换行，仍可自动折行——
+   默认 normal 会把 '\n' 折叠成空格，多个条目挤成一行难以分辨边界 */
+.dk_kvVal { color: var(--dk-label); word-break: break-all; white-space: pre-line; }
+.dk_kvValMono { font-family: var(--dk-mono); }
+
+/* 日志 */
+.dk_logBar {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  flex-wrap: wrap;
+  margin-bottom: var(--dk-gap-sm);
+}
+
+.dk_logBar .dk_input { height: var(--dk-h-md); min-width: 0; }
+
+.dk_logBox {
+  margin: 0;
+  padding: var(--dk-gap-md);
+  border-radius: var(--dk-r-md);
+  background: var(--dk-log-bg);
+  color: var(--dk-log-fg);
+  font-family: var(--dk-mono);
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: none;
+}
+
+.dk_logBox mark {
+  background: color-mix(in srgb, var(--dk-warn) 55%, transparent);
+  color: inherit;
+  border-radius: 2px;
+}
+
+/* 统计 */
+.dk_stats {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.dk_stats th,
+.dk_stats td {
+  padding: var(--dk-gap-sm) var(--dk-gap-md);
+  border-bottom: 1px solid var(--dk-border);
+  text-align: left;
+  white-space: nowrap;
+}
+
+.dk_stats th {
+  color: var(--dk-label-3);
+  font-weight: 500;
+}
+
+.dk_stats td.dk_num { font-family: var(--dk-mono); text-align: right; }
+
+.dk_bar {
+  position: relative;
+  width: 72px;
+  height: 6px;
+  border-radius: var(--dk-r-pill);
+  background: var(--dk-surface-3);
+  overflow: hidden;
+}
+
+.dk_barFill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  border-radius: var(--dk-r-pill);
+  background: var(--dk-accent);
+  transition: width var(--dk-dur) var(--dk-ease);
+}
+
+.dk_barFill[data-warn="1"] { background: var(--dk-warn); }
+.dk_barFill[data-danger="1"] { background: var(--dk-danger); }
+
+/* ============================ 镜像表 ============================ */
+
+.dk_tableWrap { overflow: auto; }
+
+/*
+ * 镜像页：搜索框已经在工具条（固定区），这里再让表体自己滚、表头钉住——
+ * 长镜像列表滚到底时列名（镜像 / 大小 / 创建 / ID）仍然看得见。
+ */
+.dk_mainImages {
+  display: flex;
+  flex-direction: column;
+  /* auto 而不是 hidden：横幅 / 空态在矮面板里仍可滚，不会被裁掉 */
+  overflow: auto;
+}
+
+.dk_imagesView {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.dk_mainImages .dk_tableWrap {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.dk_images thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--dk-surface-solid);
+}
+
+.dk_images {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.dk_images th,
+.dk_images td {
+  padding: var(--dk-gap-sm) var(--dk-gap-md);
+  border-bottom: 1px solid var(--dk-border);
+  text-align: left;
+  white-space: nowrap;
+}
+
+.dk_images th { color: var(--dk-label-3); font-weight: 500; }
+.dk_images td.dk_mono { font-family: var(--dk-mono); }
+.dk_images tbody tr:hover { background: var(--dk-hover); }
+
+/* ============================ 临时多选聚合 ============================ */
+
+/*
+ * 勾选框：纯 CSS 画方框 + 勾（用真实 <input type="checkbox"> 会带进浏览器原生
+ * 尺寸/对齐差异，还要处理只读态）。未勾选时把勾的字色设成透明，形状仍然占位，
+ * 所以勾选/取消不会让卡片头部横向抖动。
+ */
+.dk_pick {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-xs);
+  background: var(--dk-input);
+  color: transparent;
+  font-size: 11px;
+  line-height: 1;
+  transition: background var(--dk-dur) var(--dk-ease), border-color var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease);
+}
+
+.dk_pick::after { content: '✓'; }
+.dk_pick[data-on="1"] { background: var(--dk-accent); border-color: var(--dk-accent); color: #fff; }
+
+/* 选择态：整张卡片就是勾选开关，动作条收起（否则一边多选一边能点到启停删） */
+.dk_card[data-pick="1"] .dk_actionBar { display: none; }
+.dk_card[data-picked="1"] { border-color: var(--dk-accent); box-shadow: var(--dk-ring); }
+
+/* 聚合操作条：夹在工具条与正文之间的一条横栏，计数靠左、按钮靠右 */
+/* 选择态操作条：第一行是计数 + 动作，第二行是「按条件选中」chips */
+.dk_pickBar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dk-gap-sm);
+  flex: 0 0 auto;
+  padding: var(--dk-gap-sm) var(--dk-gap-lg);
+  border-bottom: 1px solid var(--dk-border);
+  background: var(--dk-surface-2);
+}
+
+.dk_pickRow {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-md);
+  flex-wrap: wrap;
+}
+
+.dk_pickPresets {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  flex-wrap: wrap;
+}
+
+.dk_pickPresetsLabel {
+  font-size: 11px;
+  color: var(--dk-label-3);
+}
+
+/* 条件 chip：与 pill 同族的轻量按钮（一行放得下 5~6 个） */
+.dk_chip {
+  height: var(--dk-h-sm);
+  padding: 0 var(--dk-gap-md);
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-pill);
+  background: var(--dk-surface-solid);
+  color: var(--dk-label-2);
+  font-size: 11px;
+  font-family: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease), border-color var(--dk-dur) var(--dk-ease);
+}
+
+.dk_chip:hover { background: var(--dk-hover); color: var(--dk-label); border-color: var(--dk-accent); }
+.dk_chip:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+.dk_chipQuiet { border-color: var(--dk-border); color: var(--dk-label-3); }
+.dk_pickNotice { margin-left: auto; }
+
+.dk_pickCount {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dk-label);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 提示在窄栏里可以换行，但不要撑破行 */
+.dk_pickHint { min-width: 0; }
+
+/* ============================ 事件活动条 ============================ */
+
+/*
+ * 活动条：贴在容器列表头部的一条窄栏。默认展开、可折叠——折叠只收起明细，
+ * 事件流照常跑（它不是暂停开关），所以折叠态也要留着标题与状态点。
+ */
+.dk_activity {
+  flex: 0 0 auto;
+  margin-bottom: var(--dk-gap-lg);
+  border: 1px solid var(--dk-border);
+  border-radius: var(--dk-r-md);
+  background: var(--dk-surface-2);
+  overflow: hidden;
+}
+
+.dk_activityHead {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-md);
+  width: 100%;
+  min-width: 0;
+  padding: var(--dk-gap-sm) var(--dk-gap-lg);
+  border: none;
+  background: transparent;
+  color: var(--dk-label);
+  font-family: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.dk_activityHead:hover { background: var(--dk-hover); }
+.dk_activityHead:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+.dk_activityTitle { flex: none; font-weight: 600; letter-spacing: .3px; }
+
+/* 状态点沿用 .dk_followState 的语义色，但内联在标题行里、不占整行也没有下边框 */
+.dk_activityState {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  flex: none;
+  color: var(--dk-label-3);
+  font-size: 11px;
+}
+
+.dk_activityState::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--dk-label-3);
+}
+
+.dk_activityState[data-state="open"]::before { background: var(--dk-success); }
+.dk_activityState[data-state="connecting"]::before,
+.dk_activityState[data-state="reconnecting"]::before { background: var(--dk-warn); }
+.dk_activityState[data-state="closed"]::before,
+.dk_activityState[data-state="unsupported"]::before { background: var(--dk-danger); }
+
+.dk_activityChevron {
+  flex: none;
+  display: inline-flex;
+  color: var(--dk-label-3);
+  transition: transform var(--dk-dur) var(--dk-ease);
+}
+
+.dk_activity[data-open="1"] .dk_activityChevron { transform: rotate(180deg); }
+
+.dk_activityList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dk-gap-sm);
+  padding: 0 var(--dk-gap-lg) var(--dk-gap-md);
+}
+
+.dk_activityEmpty {
+  padding: 0 var(--dk-gap-lg) var(--dk-gap-md);
+  color: var(--dk-label-3);
+  font-size: 11px;
+}
+
+.dk_activityItem {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  max-width: 100%;
+  padding: 2px var(--dk-gap-sm);
+  border: 1px solid var(--dk-border);
+  border-radius: var(--dk-r-xs);
+  background: var(--dk-surface-solid);
+  font-size: 11px;
+}
+
+.dk_activityTime {
+  color: var(--dk-label-3);
+  font-family: var(--dk-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.dk_activityName {
+  max-width: 200px;
+  color: var(--dk-label);
+  font-family: var(--dk-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dk_activityAction { color: var(--dk-label-2); }
+
+/* 动作着色：start 是「起来了」，die / oom / kill 是「出事了」，health 只陈述状态 */
+.dk_activityItem[data-action="start"] .dk_activityAction { color: var(--dk-success); font-weight: 600; }
+.dk_activityItem[data-action="die"] .dk_activityAction,
+.dk_activityItem[data-action="oom"] .dk_activityAction,
+.dk_activityItem[data-action="kill"] .dk_activityAction { color: var(--dk-danger); font-weight: 600; }
+.dk_activityItem[data-action="stop"] .dk_activityAction,
+.dk_activityItem[data-action="destroy"] .dk_activityAction { color: var(--dk-warn); }
+.dk_activityItem[data-action="health_status"] .dk_activityAction { color: var(--dk-label-2); font-style: italic; }
+
+/* ==================== 变更操作的「执行中」态 ==================== */
+
+/*
+ * 启停删在飞的时候（docker stop / rm 要等容器真的退出，秒级到十几秒）：
+ *   1. 正在跑的那个按钮把图标换成转圈（见 IconAction 的 busy）；
+ *   2. 同一张卡片的其它变更按钮置灰压暗，直观表示「这一组先别动」；
+ *   3. 卡片描边走强调色，扫列表时能看出哪几张正在处理。
+ * 置灰按钮本身有 opacity .45，busy 的那个要顶掉它，否则转圈也跟着变淡。
+ */
+.dk_iconBtn[data-busy="1"] { color: var(--dk-accent); }
+.dk_iconBtn[data-busy="1"]:disabled { opacity: 1; cursor: progress; }
+.dk_card[data-pending="1"] .dk_actionBar .dk_iconBtn:not([data-busy="1"]) { opacity: .4; }
+.dk_card[data-pending="1"] { border-color: color-mix(in srgb, var(--dk-accent) 45%, transparent); }
+
+/* 确认框里的「执行中…」：转圈 + 文案并排，不撑破按钮高度 */
+.dk_confirmBusy { display: inline-flex; align-items: center; gap: var(--dk-gap-sm); }
+
+/* 忙碌的确认键同样要顶掉 .dk_btn:disabled 的 .45，否则「执行中…」看不清（取消键保持置灰） */
+.dk_confirm[data-busy="1"] .dk_btnDanger { opacity: 1; cursor: progress; }
+
+/* ==================== 网络 / 卷列表 ==================== */
+
+/*
+ * 可点击的表格行（网络 / 卷列表：行 = 进详情的入口）。
+ * 只给 cursor + hover 提示，不加下划线——表格里满屏下划线会更难看。
+ */
+.dk_rowClickable { cursor: pointer; }
+.dk_rowClickable:hover { background: var(--dk-hover); }
+
+/* 挂载点列：路径很长，撑宽表格会把别的列挤没，这里限宽 + 省略号，title 里给全量 */
+.dk_pathCell { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
+
+/* ====================== 多目标总览（只读） ========================= */
+
+/*
+ * 一屏看全部目标：上面一行计数卡，下面异常表。卡片行不滚（目标数是配置出来的，
+ * 通常个位数），异常表自己滚、表头吸顶——与镜像 / 网络 / 卷页同款，靠 .dk_mainImages
+ * 里那条 `.dk_tableWrap { flex: 1 }` 生效，所以正文外层必须是 flex 列的 .dk_imagesView。
+ */
+.dk_ovCards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--dk-gap-md);
+  margin-bottom: var(--dk-gap-lg);
+}
+
+.dk_ovCard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dk-gap-sm);
+  padding: var(--dk-gap-md) var(--dk-gap-lg);
+  border: 1px solid var(--dk-border);
+  border-radius: var(--dk-r-md);
+  background: var(--dk-surface-solid);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--dk-dur) var(--dk-ease), box-shadow var(--dk-dur) var(--dk-ease);
+}
+
+.dk_ovCard:hover { border-color: var(--dk-border-strong); box-shadow: var(--dk-shadow); }
+.dk_ovCard:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+
+/* 不可达的卡要在一屏里第一眼被挑出来：危险色描边 + 淡底，和「数字都正常」的卡拉开 */
+.dk_ovCard[data-state="error"] {
+  border-color: color-mix(in srgb, var(--dk-danger) 40%, transparent);
+  background: color-mix(in srgb, var(--dk-danger) 8%, transparent);
+}
+
+.dk_ovCardHead {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  min-width: 0;
+}
+
+.dk_ovCardName {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * 计数区：**两列网格 + 固定宽度的数字槽**。
+ * 原来是 flex-wrap：四项换行后每项宽度随内容变（「21 运行中」比「0 不健康」宽），
+ * 第二列就跟着内容左右错开，看起来「文字没对齐」。
+ *   - 网格保证同一列的起点一致（两行两列对齐）；
+ *   - 数字槽固定宽 + 右对齐 + tabular-nums，保证「21」与「0」之后的标签也在同一 x
+ *     （12px 容器字号下 2.8ch ≈ 34px，够放三位数；真超过时标签右移一位，可接受）。
+ */
+.dk_ovCardCounts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--dk-gap-sm) var(--dk-gap-lg);
+}
+
+.dk_ovCount {
+  display: grid;
+  grid-template-columns: 2.8ch auto;
+  align-items: baseline;
+  gap: var(--dk-gap-xs);
+  min-width: 0;
+  font-size: 12px;
+  color: var(--dk-label-3);
+}
+
+.dk_ovCountLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.dk_ovCountValue {
+  font-size: 16px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  color: var(--dk-label);
+}
+
+.dk_ovCount[data-state="running"] .dk_ovCountValue { color: var(--dk-success); }
+.dk_ovCount[data-state="unhealthy"] .dk_ovCountValue { color: var(--dk-danger); }
+/*
+ * 还没答完的卡：只给读取态，不出 0/0/0（那会被读成「这台机器没有容器」，而它只是还没
+ * 回答——SSH 目标不可达时要等 readyTimeout 20s）。整卡压暗一点，与已有结果区分开。
+ */
+.dk_ovCard[data-state="loading"] { opacity: .7; }
+
+.dk_ovCardLoading {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  font-size: 12px;
+  color: var(--dk-label-3);
+}
+
+/* 不健康为 0 时数字即结论，不该继续用危险色喊人 */
+.dk_ovCount[data-state="unhealthy"][data-zero="1"] .dk_ovCountValue { color: var(--dk-label-3); }
+
+.dk_ovCardError {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-sm);
+  min-width: 0;
+  font-size: 12px;
+}
+
+/* SSH 报错是一长串：卡片里只留一行，全量在 title 里 */
+.dk_ovCardErrorText {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--dk-label-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dk_ovSection {
+  margin: 0 0 var(--dk-gap-sm);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dk-label-2);
+}
+
+/* 「一切正常」/「读取中」贴在卡片行下面，不需要满屏 48px 的留白 */
+.dk_ovEmpty { padding: 24px var(--dk-gap-lg); }
+
+/* ============================ 空态 / 提示 ============================ */
+
+.dk_empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dk-gap-md);
+  padding: 48px var(--dk-gap-lg);
+  color: var(--dk-label-3);
+  text-align: center;
+}
+
+.dk_emptyTitle { font-size: 13px; color: var(--dk-label-2); }
+.dk_emptyHint { font-size: 12px; max-width: 420px; line-height: 1.6; }
+
+.dk_banner {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--dk-gap-sm);
+  margin: 0 0 var(--dk-gap-lg);
+  padding: var(--dk-gap-md) var(--dk-gap-lg);
+  border: 1px solid color-mix(in srgb, var(--dk-danger) 32%, transparent);
+  border-radius: var(--dk-r-md);
+  background: color-mix(in srgb, var(--dk-danger) 8%, transparent);
+  color: var(--dk-label);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.dk_banner[data-kind="warn"] {
+  border-color: color-mix(in srgb, var(--dk-warn) 32%, transparent);
+  background: color-mix(in srgb, var(--dk-warn) 8%, transparent);
+}
+
+.dk_banner[data-kind="info"] {
+  border-color: var(--dk-border-strong);
+  background: var(--dk-surface-2);
+}
+
+.dk_bannerIcon { flex: 0 0 auto; margin-top: 1px; color: currentColor; }
+.dk_bannerBody { flex: 1 1 auto; min-width: 0; }
+.dk_bannerAction { flex: 0 0 auto; display: inline-flex; align-items: center; }
+
+/* ============================ 确认框 ============================ */
+
+.dk_confirmBackdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dk-gap-lg);
+  background: color-mix(in srgb, #000 40%, transparent);
+}
+
+.dk_confirm {
+  width: min(420px, 100%);
+  padding: var(--dk-gap-xl);
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-lg);
+  background: var(--dk-surface-solid);
+  box-shadow: var(--dk-shadow-lg);
+}
+
+.dk_confirmTitle { font-size: 13px; font-weight: 600; margin-bottom: var(--dk-gap-md); }
+.dk_confirmText { font-size: 12px; color: var(--dk-label-2); line-height: 1.7; margin-bottom: var(--dk-gap-lg); }
+.dk_confirmActions { display: flex; justify-content: flex-end; gap: var(--dk-gap-md); }
+
+/* ============================ 设置卡片 ============================ */
+
+/*
+ * 外框与 DSH 内置卡片 / 其他插件卡片（pM_pluginCard、tt_card）同一套度量：
+ * border-l2 + bg-layer-3（展开时 layer-2）、12px 圆角、标题行 14/16、
+ * 标题 14px/600、描述 12px/label-secondary。
+ * 之前是内联的 10px 圆角 + 更浅的边框 + 13px 标题，在设置列表里一眼就是「另一套」。
+ */
+/* DSH ≥0.1.6 的插件配置页只取表单本体，页面自己画标题与卡片外壳，这里不再套一层卡片。 */
+.dk_pageHost { display: block; }
+
+.dk_settingsCard {
+  list-style: none;
+  border: 1px solid var(--dk-border-strong);
+  border-radius: var(--dk-r-xl);
+  background: var(--dk-surface-3);
+  transition: border-color var(--dk-dur) var(--dk-ease), background var(--dk-dur) var(--dk-ease);
+}
+
+.dk_settingsCard:hover { border-color: var(--dk-label-dimmed); }
+.dk_settingsCardOpen { background: var(--dk-surface-2); border-color: var(--dk-label-dimmed); }
+
+.dk_settingsHead {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-lg);
+  width: 100%;
+  padding: var(--dk-pad-cardHead);
+  border: 0;
+  border-radius: var(--dk-r-xl);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.dk_settingsHead:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+.dk_settingsHeadText { display: flex; flex-direction: column; gap: var(--dk-gap-xs); flex: 1; min-width: 0; }
+.dk_settingsName { color: var(--dk-label); font-size: 14px; font-weight: 600; line-height: 1.4; }
+/* dsh-plugin-kit 套件徽标（约定见 @hyzyn/dsh-kit README：全部 kit 设置卡片共用） */
+.dshkit_badge {
+  flex: none;
+  margin-left: auto;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: 0.02em;
+  color: var(--dk-label-2, var(--dsw-alias-label-dimmed));
+  background: var(--dk-bg-2, var(--dsw-alias-bg-layer-2));
+  border: 1px solid var(--dk-border, var(--dsw-alias-border-l1));
+}
+.dk_settingsDesc { color: var(--dk-label-2); font-size: 12px; line-height: 1.5; }
+
+.dk_settingsChevron {
+  flex: none;
+  display: inline-flex;
+  color: var(--dk-label-3);
+  transition: transform var(--dk-dur) var(--dk-ease);
+}
+
+.dk_settingsCardOpen .dk_settingsChevron { transform: rotate(180deg); }
+
+.dk_settingsBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dk-gap-lg);
+  padding: 2px var(--dk-gap-xl) var(--dk-gap-xl);
+  color: var(--dk-label);
+  font-size: 13px;
+}
+
+.dk_cardSection {
+  margin-top: var(--dk-gap-xs);
+  padding-bottom: var(--dk-gap-xs);
+  border-bottom: 1px solid var(--dk-border);
+  color: var(--dk-label-3);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: .3px;
+}
+
+.dk_field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dk-gap-sm);
+  min-width: 0;
+}
+
+/*
+ * 标签行高必须锁死。
+ * 中文走 PingFang SC 回退字体，行框比纯拉丁文本高 ~2.5px（16.5 vs 14）；栅格是
+ * align-items:start，同一行里「docker CLI」和「统计刷新间隔（秒）」的输入框就会
+ * 差 2.5px 错开，基线也高低不齐。给死行高后两种文本的行框等高，输入框顶边对齐。
+ * 别删成 line-height: normal —— 一删就退回字体度量决定行框。
+ */
+.dk_label { font-size: 12px; line-height: 1.4; color: var(--dk-label-2); }
+.dk_hint { font-size: 11px; color: var(--dk-label-3); line-height: 1.6; }
+.dk_row { display: flex; align-items: center; gap: var(--dk-gap-md); flex-wrap: wrap; }
+
+/*
+ * 设置卡片的字段栅格：**等宽** 3 列（窄屏 2 列）。
+ * 不要再给单个字段跨列——第一行跨 2 列、第二行单列，行与行之间宽度不一致，
+ * 看起来比不对齐还乱（v0.1.22 的教训）。
+ */
+.dk_fieldGrid {
+  display: grid;
+  /* auto-fit + minmax：列宽跟着**容器**走，而不是视口 —— 设置面板本身可能是窄的。
+     卡片 ~966px → 3 列；~570px → 2 列；再窄 → 1 列，永远不会叠 */
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--dk-gap-lg) var(--dk-gap-xl);
+  align-items: start;
+}
+
+.dk_fieldGrid .dk_input,
+.dk_fieldGrid .dk_select { min-width: 0; }
+
+/* 数字输入去掉浏览器原生上下箭头：各平台样式不一，还会吃掉右内边距 */
+.dk_input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+  font-variant-numeric: tabular-nums;
+}
+
+.dk_input[type="number"]::-webkit-outer-spin-button,
+.dk_input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/*
+ * 目标行与内联 SSH 字段共用同一套列宽模板（1fr · 96px · 1fr · 150px），
+ * 内联块整宽铺开 → host/port/username/auth 正好落在目标名/类型/连接簿/操作列下方。
+ */
+.dk_targetRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) minmax(0, 150px);
+  gap: var(--dk-gap-sm);
+  align-items: center;
+  padding: var(--dk-gap-sm);
+  border: 1px solid var(--dk-border);
+  border-radius: var(--dk-r-md);
+  background: var(--dk-surface-2);
+}
+
+/* 删除按钮靠右，不跟着列宽被拉长 */
+.dk_targetRow > .dk_btnDanger { justify-self: end; }
+
+.dk_targetInline {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) minmax(0, 150px);
+  gap: var(--dk-gap-sm);
+  align-items: center;
+}
+
+/* 凭据占前三列，复选框固定第 4 列（与上面的 auth 下拉上下对齐） */
+.dk_targetInline > .dk_credential { grid-column: 1 / span 3; }
+.dk_targetInline > .dk_check { grid-row: 2; grid-column: 4; }
+
+.dk_targetRow .dk_input,
+.dk_targetRow .dk_select {
+  height: var(--dk-h-md);
+  min-width: 0;
+}
+
+.dk_targetHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dk-gap-md);
+}
+
+.dk_msg { font-size: 12px; }
+.dk_msg[data-kind="ok"] { color: var(--dk-success); }
+.dk_msg[data-kind="error"] { color: var(--dk-danger); }
+
+.dk_spin {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  border: 2px solid var(--dk-border-strong);
+  border-top-color: var(--dk-accent);
+  border-radius: 50%;
+  animation: dk_spin .7s linear infinite;
+}
+
+@keyframes dk_spin { to { transform: rotate(360deg); } }
+
+.dk_srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* 窄屏：抽屉改为覆盖整栏 */
+@media (max-width: 860px) {
+  .dk_body { flex-direction: column; }
+  .dk_targetRow,
+  .dk_targetInline { grid-template-columns: minmax(0, 1fr) 80px; }
+  .dk_targetInline > .dk_credential { grid-column: 1 / -1; }
+  .dk_targetInline > .dk_check { grid-row: auto; grid-column: 2; }
+  .dk_cardRow { grid-template-columns: 40px 1fr; }
+  .dk_projectRow { grid-template-columns: 96px 1fr auto; }
+  .dk_projectImage,
+  .dk_projectPorts { display: none; }
+}
+
+/* ============================ 镜像详情 ============================ */
+
+/* 镜像表最后一列（操作）：宽度收到内容、按钮右对齐，不跟数据列抢宽度 */
+.dk_colActions { width: 1%; white-space: nowrap; text-align: right; }
+.dk_rowActions { display: inline-flex; align-items: center; gap: var(--dk-gap-xs); }
+
+.dk_layerList {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 220px;
+  overflow: auto;
+}
+
+.dk_layerItem {
+  display: flex;
+  align-items: center;
+  gap: var(--dk-gap-md);
+  font-size: 12px;
+  color: var(--dk-label-2);
+}
+
+.dk_layerIndex {
+  flex: none;
+  width: 36px;
+  color: var(--dk-label-3);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.dk_layerId { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.dk_labelList { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
+.dk_labelItem { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: var(--dk-gap-md); }
+.dk_labelKey { color: var(--dk-label-3); font-family: var(--dk-mono); overflow-wrap: anywhere; }
+.dk_labelVal { color: var(--dk-label); font-family: var(--dk-mono); overflow-wrap: anywhere; }
+
+.dk_historyTable td { vertical-align: top; }
+.dk_historyCmd { max-width: 440px; overflow: hidden; text-overflow: ellipsis; }
+
+/* ============================ 镜像拉取进度 ============================ */
+
+.dk_pullBody { gap: var(--dk-gap-md); }
+
+.dk_pullBox {
+  flex: 1 1 auto;
+  min-height: 180px;
+  margin-top: var(--dk-gap-md);
+  padding: var(--dk-gap-md);
+  border: 1px solid var(--dk-border);
+  border-radius: var(--dk-r-md);
+  background: var(--dk-log-bg);
+  color: var(--dk-log-fg);
+  font-family: var(--dk-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dk_pullLine { min-height: 1.5em; }
+/* 逐层状态行：层键由 data-key 标出，给层状态一点色彩区分 */
+.dk_pullLine[data-key] { color: color-mix(in srgb, var(--dk-log-fg) 82%, var(--dk-accent)); }
+
+/* ============================ 统计实时跟随 ============================ */
+
+.dk_statsView {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dk-gap-md);
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.dk_statsBar { display: flex; align-items: center; gap: var(--dk-gap-sm); flex-wrap: wrap; }
+.dk_trend { display: inline-flex; align-items: center; gap: var(--dk-gap-sm); }
+
+.dk_spark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  height: 22px;
+  color: var(--dk-accent);
+}
+
+.dk_spark svg { display: block; width: 96px; height: 22px; overflow: visible; }
+.dk_spark[data-alert="1"] { color: var(--dk-danger); }
+.dk_sparkEmpty { font-size: 11px; color: var(--dk-label-3); }
+
+/* ============================ Compose 项目 ============================ */
+
+.dk_projects { display: flex; flex-direction: column; gap: var(--dk-gap-lg); }
+
+.dk_project {
+  border: 1px solid var(--dk-border);
+  border-radius: var(--dk-r-md);
+  background: var(--dk-surface-2);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color var(--dk-dur) var(--dk-ease), box-shadow var(--dk-dur) var(--dk-ease);
+}
+
+.dk_project:hover { border-color: var(--dk-border-strong); }
+.dk_project:focus-visible { outline: none; box-shadow: var(--dk-ring); }
+.dk_projectHead { display: flex; align-items: center; gap: var(--dk-gap-md); padding: var(--dk-gap-md) var(--dk-gap-lg); }
+.dk_projectIcon { display: inline-flex; align-items: center; color: var(--dk-accent); }
+.dk_projectName { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dk_projectRows { display: flex; flex-direction: column; border-top: 1px solid var(--dk-border); }
+
+.dk_projectRow {
+  display: grid;
+  grid-template-columns: 120px minmax(120px, 1.1fr) auto minmax(120px, 1.2fr) minmax(80px, 1fr);
+  align-items: center;
+  gap: var(--dk-gap-md);
+  padding: var(--dk-gap-sm) var(--dk-gap-lg);
+  font-size: 12px;
+  border-top: 1px solid var(--dk-border);
+}
+
+.dk_projectRow:first-child { border-top: none; }
+.dk_projectSvc { color: var(--dk-label-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dk_projectContainer { font-family: var(--dk-mono); color: var(--dk-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dk_projectImage { font-family: var(--dk-mono); color: var(--dk-label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dk_projectPorts { color: var(--dk-label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.dk_composeTable td { vertical-align: middle; }
+
+/* 聚合日志的 [service] 前缀（同一份日志着色，只多一个来源标签） */
+.dk_logSvc { margin-right: 6px; color: var(--dk-accent); font-weight: 600; }