skillcaddy 0.27.0

package/public/styles.css

@@ -0,0 +1,1611 @@
+:root {
+  color-scheme: light;
+  /* 从 public/skillcaddy_CN.png 与 public/skillcaddy_EN.png 的书包图标、字标取样。
+     主蓝负责品牌与行动，深海军蓝承载文字和工作台，暖橙/柔绿只做语义强调。 */
+  --brand-blue: #2f70fd;
+  --brand-blue-strong: #155df9;
+  --brand-blue-active: #0a4ffb;
+  --brand-navy: #08122c;
+  --brand-blue-wash: #eaf2ff;
+  --primary: var(--brand-blue);
+  /* 主按钮/正文蓝：白字 5.30:1，canvas 上作文本 5.06:1。 */
+  --primary-strong: var(--brand-blue-strong);
+  /* hover/active：白字 5.96:1。 */
+  --primary-active: var(--brand-blue-active);
+  --primary-disabled: var(--brand-blue-wash);
+  --ink: var(--brand-navy);
+  --body: #3e485c;
+  --body-strong: #12243d;
+  --muted: #5f687a;
+  /* 次要文字：三处底色（surface-soft/surface-card/canvas）都 ≥4.63:1（WCAG AA）。 */
+  --muted-soft: #5d6c83;
+  --hairline: #d2deed;
+  --hairline-soft: #e3edf9;
+  --canvas: #f7fafe;
+  --surface-soft: #eef5fd;
+  --surface-card: #e6f0fd;
+  --surface-dark: var(--brand-navy);
+  --surface-dark-elevated: #12243d;
+  --surface-dark-soft: #0a152b;
+  --on-primary: #ffffff;
+  --on-dark: #f8fafd;
+  --on-dark-soft: #b6caea;
+  --accent-green: #94bbaa;
+  --accent-amber: #f18744;
+  --success: #2a7a5a;
+  /* warning 只在 advice 徽标上成对使用：暖色背景配深色文字。 */
+  --warning-surface: #fff0e4;
+  --warning-ink: #8a4a1f;
+  --error: #c64545;
+  /* 深色 toast 上的错误文本：#c64545 压深底只有 ~2.5:1，需提亮到 8.7:1。 */
+  --error-on-dark: #f2a6a6;
+  --scroll-thumb: #a9bddb;
+  --selection: #ccddff;
+  --shadow-toast: 0 8px 24px rgba(8, 18, 44, 0.24);
+  --scope-agents-surface: #edf4ff;
+  --scope-agents-line: #c8daf7;
+  --scope-agents-ink: #245bb6;
+  --scope-claude-surface: #fff2e8;
+  --scope-claude-line: #f0d2bc;
+  --scope-claude-ink: #945124;
+  --scope-global-surface: #f1f4f8;
+  --scope-global-line: #d4dce7;
+  --scope-global-ink: #42536c;
+  --scope-hermes-surface: #fff8df;
+  --scope-hermes-line: #eadba4;
+  --scope-hermes-ink: #78601b;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  /* 三个字族全部自带兜底：本地工具需离线可用，不引入网络字体依赖。 */
+  --display: Georgia, "Times New Roman", "Songti SC", serif;
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --primary: #78a6ff;
+    --primary-strong: #4f86f7;
+    --primary-active: #6f9fff;
+    --primary-disabled: #24324a;
+    --ink: #f5f8ff;
+    --body: #c9d3e3;
+    --body-strong: #eef4ff;
+    --muted: #aebbd0;
+    --muted-soft: #a9b8ce;
+    --hairline: #33425a;
+    --hairline-soft: #26364e;
+    --canvas: #0b1322;
+    --surface-soft: #111d30;
+    --surface-card: #182843;
+    --surface-dark: #050a15;
+    --surface-dark-elevated: #182943;
+    --surface-dark-soft: #091426;
+    --on-primary: #08122c;
+    --on-dark: #f8fafd;
+    --on-dark-soft: #b9c9e3;
+    --accent-green: #77b99f;
+    --accent-amber: #f0a06a;
+    --success: #75d1aa;
+    --warning-surface: #3b291f;
+    --warning-ink: #ffc79d;
+    --error: #d95768;
+    --error-on-dark: #ffb4bd;
+    --scroll-thumb: #5d7190;
+    --selection: #284d88;
+    --shadow-toast: 0 12px 32px rgba(0, 0, 0, 0.42);
+    --scope-agents-surface: #13243d;
+    --scope-agents-line: #2e4f7b;
+    --scope-agents-ink: #9cc0ff;
+    --scope-claude-surface: #2b211d;
+    --scope-claude-line: #624332;
+    --scope-claude-ink: #ffc69f;
+    --scope-global-surface: #171f2c;
+    --scope-global-line: #354154;
+    --scope-global-ink: #c3cfe0;
+    --scope-hermes-surface: #282519;
+    --scope-hermes-line: #5b512b;
+    --scope-hermes-ink: #f1d875;
+  }
+}
+
+* { box-sizing: border-box; }
+
+html {
+  scrollbar-color: var(--scroll-thumb) var(--canvas);
+  scrollbar-width: thin;
+}
+
+::selection {
+  background: var(--selection);
+  color: var(--ink);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--canvas);
+}
+
+::-webkit-scrollbar-thumb {
+  border: 2px solid var(--canvas);
+  border-radius: 999px;
+  background: var(--scroll-thumb);
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--canvas);
+  color: var(--ink);
+  font-family: var(--sans);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+input,
+textarea {
+  caret-color: var(--primary-strong);
+}
+
+.shell {
+  width: min(1200px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 24px 0 40px;
+}
+
+.topbar {
+  display: flex;
+  min-height: 64px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.brand,
+.topbar-actions,
+.actions,
+.scope-action-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Topbar 的 Hermes 开关：和版本号同一行、视觉密度与 chip 一致。
+   关闭时整个已启用面板的 Hermes 段、库分组里的 Hermes 按钮会同步消失。 */
+.topbar-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 4px 12px 4px 8px;
+  border: 1px solid var(--hairline);
+  border-radius: 999px;
+  background: var(--canvas);
+  color: var(--muted);
+  font: 500 13px/1 var(--sans);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.topbar-toggle:hover {
+  background: var(--surface-card);
+  color: var(--ink);
+}
+
+.topbar-toggle input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.topbar-toggle-track {
+  position: relative;
+  flex: 0 0 auto;
+  width: 30px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--surface-card);
+  transition: background-color 140ms ease;
+}
+
+.topbar-toggle > span {
+  display: block;
+  margin: 0;
+}
+
+.topbar-toggle-track::after {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: var(--canvas);
+  box-shadow: 0 1px 2px rgba(8, 18, 44, 0.18);
+  content: "";
+  transition: transform 140ms ease;
+}
+
+.topbar-toggle input:checked ~ .topbar-toggle-track {
+  background: var(--primary-strong);
+}
+
+.topbar-toggle input:checked ~ .topbar-toggle-track::after {
+  transform: translateX(12px);
+}
+
+.topbar-toggle input:focus-visible ~ .topbar-toggle-track {
+  outline: 2px solid var(--primary-strong);
+  outline-offset: 2px;
+}
+
+.topbar-toggle:has(input:checked) {
+  color: var(--ink);
+  border-color: var(--primary-wash, var(--primary-strong));
+}
+
+.topbar-link {
+  display: inline-flex;
+  min-height: 36px;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--hairline);
+  border-radius: 999px;
+  background: var(--canvas);
+  color: var(--muted);
+  padding: 0 10px;
+  font: 500 13px/1 var(--sans);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.topbar-link:hover {
+  background: var(--surface-card);
+  color: var(--ink);
+}
+
+.topbar-link:focus-visible {
+  outline: 2px solid var(--primary-strong);
+  outline-offset: 2px;
+}
+
+.github-icon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .topbar-toggle-track,
+  .topbar-toggle-track::after {
+    transition: none;
+  }
+}
+
+/* Hermes 开关关闭：整段已启用面板的 Hermes 段 + 库分组里的 Hermes 操作全部折叠。
+   JS 端会同步停止拉取 hermes 列表渲染，但这里仍要兜底，避免任何旁路渲染时露馅。 */
+body.hermes-hidden [data-hermes-section],
+body.hermes-hidden .hermes-scope-actions,
+body.hermes-hidden .skill-hermes-action,
+body.hermes-hidden [data-focus-scope="hermes"] {
+  display: none !important;
+}
+
+.brand {
+  color: var(--ink);
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.brand-mark {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+}
+
+.brand-mark::before,
+.brand-mark::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 18px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--brand-blue-strong);
+  content: "";
+  transform: translate(-50%, -50%);
+}
+
+.brand-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
+  gap: 48px;
+  align-items: center;
+  padding: 80px 0 48px;
+}
+
+.hero-copy {
+  max-width: 650px;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3 {
+  color: var(--ink);
+}
+
+h1 {
+  margin-bottom: 22px;
+  font-family: var(--display);
+  font-size: clamp(40px, 6vw, 64px);
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+}
+
+h2 {
+  margin-bottom: 0;
+  font-size: 22px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.3;
+}
+
+h3 {
+  margin-bottom: 0;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+.lede {
+  max-width: 590px;
+  margin-bottom: 0;
+  color: var(--body);
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.product-surface {
+  overflow: hidden;
+  border-radius: var(--radius-xl);
+  background: var(--surface-dark);
+  color: var(--on-dark);
+  padding: 24px;
+}
+
+.surface-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+  color: var(--on-dark-soft);
+  font: 13px/1.4 var(--mono);
+}
+
+.surface-header span {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--primary);
+}
+
+.surface-header span:nth-child(2) { background: var(--accent-amber); }
+.surface-header span:nth-child(3) { background: var(--accent-green); }
+.surface-header strong { margin-left: auto; font-weight: 400; }
+
+.surface-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  overflow: hidden;
+  border: 1px solid var(--surface-dark-elevated);
+  border-radius: var(--radius-lg);
+  background: var(--surface-dark-elevated);
+}
+
+.surface-grid div {
+  min-width: 0;
+  background: var(--surface-dark-soft);
+  padding: 18px 14px;
+}
+
+.surface-grid span,
+.surface-path {
+  display: block;
+  color: var(--on-dark-soft);
+  font: 12px/1.45 var(--mono);
+}
+
+.surface-grid strong {
+  display: block;
+  margin-top: 8px;
+  overflow: hidden;
+  color: var(--on-dark);
+  font-family: var(--display);
+  font-size: 34px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.surface-path {
+  margin: 20px 0 0;
+  overflow-wrap: anywhere;
+}
+
+/* 老用户（有项目历史或 URL 带 projectPath）不需要每天读一遍产品说服文案：
+   hero 坍缩成一条状态带，工作区回到首屏。完整 hero 只留给首次访客。 */
+.hero.is-compact {
+  display: block;
+  padding: 20px 0 24px;
+}
+
+.hero.is-compact .hero-copy {
+  display: none;
+}
+
+.hero.is-compact .product-surface {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 20px;
+  padding: 12px 16px;
+  border-radius: var(--radius-lg);
+}
+
+.hero.is-compact .surface-header {
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+.hero.is-compact .surface-grid {
+  display: flex;
+  gap: 16px;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.hero.is-compact .surface-grid div {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 0;
+  background: transparent;
+}
+
+.hero.is-compact .surface-grid strong {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 15px;
+  letter-spacing: 0;
+}
+
+.hero.is-compact .surface-path {
+  flex: 1 1 220px;
+  min-width: 0;
+  margin: 0;
+  text-align: right;
+}
+
+.advice-list {
+  /* 此前的 .advice-list 走横向铺开的内联列表；现在 advice 收缩为 📢 触发的 popover，
+     容器本身的边距/边框由 .advice-popover 提供。:empty 仍要 display:none 兜底渲染前的空状态。 */
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+}
+
+.advice-list:empty {
+  display: none;
+}
+
+/* Popover 触发按钮：放在 panel-title 右侧、来源过滤左侧。
+   📢 是内容信号，不是控制状态——视觉上用一个比版本号更轻的 chip 形态表达。 */
+.library-title-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.advice-popover-anchor {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.advice-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  border: 1px solid var(--hairline);
+  border-radius: 999px;
+  background: var(--canvas);
+  color: var(--ink);
+  padding: 0 12px 0 10px;
+  font: 500 13px/1.4 var(--sans);
+  white-space: nowrap;
+}
+
+.advice-toggle:hover,
+.advice-toggle[aria-expanded="true"] {
+  background: var(--surface-card);
+  color: var(--ink);
+  border-color: var(--primary-strong);
+}
+
+.advice-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+}
+
+.advice-toggle .count {
+  margin: 0;
+  border-radius: 999px;
+  background: var(--surface-card);
+  color: var(--ink);
+  padding: 1px 7px;
+  font: 500 12px/1.4 var(--sans);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 出现 warning 时整体偏暖：徽标底色换到 warning 表面，文案色用 warning-ink。 */
+.advice-toggle.has-warning {
+  background: var(--warning-surface);
+  border-color: var(--warning-surface);
+  color: var(--warning-ink);
+}
+
+.advice-toggle.has-warning .count {
+  background: var(--canvas);
+  color: var(--warning-ink);
+}
+
+/* Popover 面板：固定在按钮下方右对齐；最大高度 + 滚动以容纳 8 条 advice。 */
+.advice-popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 30;
+  display: grid;
+  gap: 8px;
+  width: min(440px, calc(100vw - 32px));
+  max-height: min(60vh, 520px);
+  overflow-y: auto;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-md);
+  background: var(--canvas);
+  box-shadow: 0 12px 32px rgba(8, 18, 44, 0.14);
+  padding: 12px;
+}
+
+.advice-popover[hidden] {
+  display: none;
+}
+
+.advice-popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: -4px 0 4px;
+  padding: 0 4px;
+  color: var(--muted);
+  font: 500 12px/1.4 var(--sans);
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.advice-popover-close {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  padding: 0;
+  font: 600 16px/1 var(--sans);
+  min-height: 24px;
+}
+
+.advice-popover-close:hover,
+.advice-popover-close:active {
+  background: var(--surface-card);
+  color: var(--ink);
+}
+
+.library-search {
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.library-search input {
+  min-height: 36px;
+  padding: 0 14px;
+}
+
+.library-search input::placeholder {
+  color: var(--muted-soft);
+}
+
+/* 严重级别由文字徽标（提示/注意）承载，颜色只做辅助——
+   此前的 4px 侧边彩条是级别的唯一编码，也是最典型的 AI 生成 UI 图案。 */
+.advice {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: start;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-md);
+  background: var(--surface-soft);
+  padding: 12px;
+}
+
+.advice-aside {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+
+.advice-severity {
+  border-radius: 999px;
+  background: var(--surface-card);
+  color: var(--body-strong);
+  padding: 2px 8px;
+  font: 500 11px/1.4 var(--sans);
+  white-space: nowrap;
+}
+
+.advice.warning .advice-severity {
+  background: var(--warning-surface);
+  color: var(--warning-ink);
+}
+
+.advice strong {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--body-strong);
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.advice p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.advice-type {
+  color: var(--muted-soft);
+  font: 12px/1.4 var(--mono);
+}
+
+.advice-action {
+  margin-top: 8px;
+  padding: 6px 9px;
+  font-size: 12px;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 12px;
+  align-items: end;
+  margin-bottom: 24px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-lg);
+  background: var(--surface-soft);
+  padding: 16px;
+}
+
+.project-history {
+  display: flex;
+  grid-column: 1 / -1;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.project-chip {
+  display: inline-grid;
+  grid-template-columns: minmax(0, 1fr) 28px;
+  align-items: center;
+  max-width: min(100%, 360px);
+  min-height: 32px;
+  overflow: hidden;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-md);
+  background: var(--canvas);
+  color: var(--body);
+  font: 12px/1.4 var(--mono);
+}
+
+.project-chip:hover {
+  background: var(--surface-card);
+  color: var(--ink);
+}
+
+.project-chip-path,
+.project-chip-remove {
+  min-height: 30px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.project-chip-path {
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 10px 4px 12px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-chip-path:disabled {
+  cursor: not-allowed;
+  color: var(--muted);
+}
+
+.project-chip-remove {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  padding: 4px 0;
+  border-left: 1px solid var(--hairline);
+  color: var(--muted);
+}
+
+.project-chip-remove:hover {
+  background: var(--ink);
+  color: var(--canvas);
+}
+
+.controls label > span,
+.metadata-form label > span {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--muted);
+  font: 500 13px/1.4 var(--sans);
+}
+
+.field-hint {
+  display: block;
+  margin: 0 0 8px;
+  color: var(--muted-soft);
+  font: 12px/1.4 var(--sans);
+}
+
+.controls label > span {
+  margin-bottom: 4px;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  min-height: 40px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-md);
+  background: var(--canvas);
+  color: var(--ink);
+  padding: 0 14px;
+}
+
+textarea {
+  min-height: 88px;
+  padding: 10px 14px;
+  resize: vertical;
+}
+
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  border-color: var(--primary-strong);
+  outline: 2px solid var(--primary-strong);
+  outline-offset: 1px;
+}
+
+/* 输入框此前有焦点环而按钮没有：键盘用户会在全站最主要的交互体上丢失位置。
+   offset 2px 在按钮与环之间留出画布底色，深色按钮上环也保持可辨。 */
+button:focus-visible {
+  outline: 2px solid var(--primary-strong);
+  outline-offset: 2px;
+}
+
+button {
+  min-height: 40px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: var(--primary-strong);
+  color: var(--on-primary);
+  cursor: pointer;
+  padding: 0 20px;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+button:active,
+button:hover {
+  background: var(--primary-active);
+}
+
+button:disabled {
+  cursor: not-allowed;
+  background: var(--primary-disabled);
+  color: var(--muted);
+}
+
+button.is-enabled {
+  background: var(--surface-soft);
+  color: var(--success);
+  border: 1px solid var(--success);
+}
+
+button[aria-disabled="true"] {
+  cursor: default;
+}
+
+button.secondary {
+  border-color: var(--hairline);
+  background: var(--canvas);
+  color: var(--ink);
+}
+
+button.secondary:active,
+button.secondary:hover {
+  background: var(--surface-card);
+}
+
+button.danger,
+.actions .danger {
+  background: var(--surface-dark-elevated);
+  color: var(--on-dark);
+}
+
+button.danger:active,
+button.danger:hover,
+.actions .danger:active,
+.actions .danger:hover {
+  background: var(--error);
+  color: var(--on-primary);
+}
+
+button.danger:disabled,
+.actions .danger:disabled {
+  background: var(--primary-disabled);
+  color: var(--muted);
+}
+
+.icon-button {
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  min-height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--hairline);
+  border-radius: 999px;
+  background: var(--canvas);
+  color: var(--ink);
+  padding: 0;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.icon-button:active,
+.icon-button:hover {
+  background: var(--surface-card);
+}
+
+.version {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: var(--surface-card);
+  color: var(--ink);
+  font: 500 13px/1.4 var(--sans);
+}
+
+.version:empty { display: none; }
+
+.workspace {
+  display: grid;
+  grid-template-columns: minmax(440px, 0.92fr) minmax(0, 1.08fr);
+  gap: 24px;
+  align-items: start;
+}
+
+.panel {
+  overflow: hidden;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-lg);
+  background: var(--canvas);
+}
+
+.panel-title {
+  display: flex;
+  min-height: 72px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--hairline);
+  padding: 18px 20px;
+}
+
+.panel-title > span,
+.meta,
+.path {
+  color: var(--muted);
+  font: 13px/1.5 var(--mono);
+}
+
+.panel-title select {
+  width: 168px;
+}
+
+.tag-tabs {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--hairline);
+  background: var(--canvas);
+  padding: 12px 20px;
+}
+
+/* 可滚动线索：右缘渐隐遮罩，窄屏下滚动条已隐藏时提示还有更多标签。 */
+.tag-tabs::after {
+  position: sticky;
+  right: -20px;
+  flex: 0 0 28px;
+  width: 28px;
+  margin-left: -28px;
+  background: linear-gradient(to right, transparent, var(--canvas) 85%);
+  content: "";
+  pointer-events: none;
+}
+
+.tag-tabs:empty {
+  display: none;
+}
+
+.category-tab {
+  min-height: 32px;
+  border-color: transparent;
+  background: transparent;
+  color: var(--muted);
+  padding: 0 14px;
+}
+
+.category-tab:active,
+.category-tab:hover,
+.category-tab.is-active {
+  background: var(--surface-card);
+  color: var(--ink);
+}
+
+.list {
+  display: grid;
+  gap: 1px;
+  background: var(--hairline);
+}
+
+.skill-group {
+  min-width: 0;
+  background: var(--canvas);
+}
+
+.group-bar {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  border-bottom: 1px solid var(--hairline);
+  background: var(--surface-card);
+  padding: 16px 20px;
+}
+
+.group-head {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: 8px;
+  row-gap: 5px;
+  text-align: left;
+}
+
+.group-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  min-width: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ink);
+  padding: 0;
+  font: inherit;
+  text-align: left;
+}
+
+.group-toggle:active,
+.group-toggle:hover {
+  background: transparent;
+  color: var(--primary-active);
+}
+
+.group-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.scope-divider {
+  width: 1px;
+  height: 24px;
+  flex: 0 0 1px;
+  background: var(--hairline);
+}
+
+/* 作用域图例：此前全局按钮用「G+」「G×」自造记号，含义只存在于悬停 title 里。 */
+.scope-label {
+  flex: 0 0 auto;
+  color: var(--muted);
+  font: 500 11px/1 var(--sans);
+  letter-spacing: 0.5px;
+}
+
+.group-enable-all,
+.group-enable-global,
+.group-enable-hermes {
+  min-width: 44px;
+  height: 36px;
+  background: var(--primary-strong);
+  color: var(--on-primary);
+  padding: 0 12px;
+  font-size: 12px;
+  white-space: nowrap;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.group-enable-all:active,
+.group-enable-all:hover,
+.group-enable-global:active,
+.group-enable-global:hover,
+.group-enable-hermes:active,
+.group-enable-hermes:hover {
+  background: var(--primary-active);
+}
+
+.group-enable-all:disabled,
+.group-enable-global:disabled,
+.group-enable-hermes:disabled {
+  background: var(--primary-disabled);
+  color: var(--muted);
+}
+
+.group-enable-all.is-complete {
+  background: var(--success);
+  color: var(--on-primary);
+}
+
+.group-enable-global.is-complete {
+  background: var(--success);
+  color: var(--on-primary);
+}
+
+.group-enable-hermes.is-complete {
+  background: var(--success);
+  color: var(--on-primary);
+}
+
+.group-disable-all {
+  width: 36px;
+  min-width: 36px;
+  height: 36px;
+}
+
+.group-heading {
+  min-width: 0;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.group-toggle .title {
+  overflow-wrap: anywhere;
+}
+
+.group-head p {
+  flex: 0 0 100%;
+  margin: 5px 0 0;
+  min-width: 0;
+  color: var(--muted);
+  font: 12px/1.4 var(--mono);
+  overflow-wrap: anywhere;
+}
+
+.chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 1em;
+  color: var(--primary-strong);
+  font: 700 14px/1 var(--mono);
+  transition: transform 120ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron {
+    transition: none;
+  }
+}
+
+.is-collapsed .chevron {
+  transform: rotate(-90deg);
+}
+
+.is-collapsed .group-items {
+  display: none;
+}
+
+.group-items {
+  display: grid;
+  gap: 1px;
+  background: var(--hairline);
+}
+
+.empty,
+.skill {
+  background: var(--canvas);
+  padding: 16px 20px;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  color: var(--muted);
+  font: 14px/1.55 var(--sans);
+}
+
+.empty strong {
+  margin-bottom: 4px;
+  color: var(--body-strong);
+  font-weight: 500;
+}
+
+.empty-action {
+  align-self: flex-start;
+  margin-top: 12px;
+  min-height: 34px;
+  padding: 0 12px;
+  font-size: 13px;
+}
+
+.skill {
+  display: grid;
+  gap: 10px;
+}
+
+.skill-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--body-strong);
+  font-weight: 500;
+}
+
+.badge {
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--surface-card);
+  color: var(--ink);
+  padding: 4px 12px;
+  font: 500 13px/1.4 var(--sans);
+  white-space: nowrap;
+}
+
+/* 组头徽标：移入 group-head 后紧随标题行。margin-left:auto 在桌面把它
+   推到行尾（与原来 bar 行尾位置一致）；窄屏由 group-head 的 flex-wrap
+   自然落在标题行，不再独占一行。 */
+.group-head > .badge {
+  margin-left: auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.skill-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.skill-tags:empty {
+  display: none;
+}
+
+.tag-pill {
+  border-radius: 999px;
+  background: var(--surface-card);
+  color: var(--ink);
+  padding: 4px 10px;
+  font: 500 13px/1.4 var(--sans);
+}
+
+.tag-pill.is-muted {
+  background: var(--surface-soft);
+  color: var(--muted);
+}
+
+.note {
+  margin: 0;
+  color: var(--body);
+  font: 14px/1.55 var(--sans);
+}
+
+.note.is-empty {
+  color: var(--muted-soft);
+}
+
+.metadata-form {
+  display: grid;
+  gap: 12px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-md);
+  background: var(--surface-soft);
+  padding: 14px;
+}
+
+.metadata-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.toggle-field {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 10px;
+}
+
+.toggle-field input {
+  width: 24px;
+  min-height: 24px;
+  accent-color: var(--primary-strong);
+}
+
+.toggle-field span {
+  margin: 0;
+  color: var(--body);
+}
+
+.actions {
+  flex-wrap: wrap;
+}
+
+.actions button {
+  min-height: 34px;
+  padding: 0 12px;
+  font-size: 14px;
+}
+
+.path {
+  overflow-wrap: anywhere;
+}
+
+/* 反馈必须落在视野内：库面板几千像素长，页尾的一行小字等于没有反馈。
+   固定右下 toast；空态用 opacity 而非 display:none，元素留在可达性树里，
+   live region 写入时读屏才能稳定播报。 */
+.message-region {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: min(480px, calc(100vw - 48px));
+  margin: 0;
+  pointer-events: none;
+}
+
+.message {
+  margin: 0;
+  border-radius: var(--radius-md);
+  background: var(--surface-dark);
+  color: var(--on-dark);
+  padding: 12px 16px;
+  font: 13px/1.5 var(--mono);
+  box-shadow: var(--shadow-toast);
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.message:empty {
+  opacity: 0;
+  transform: translateY(6px);
+  padding: 0;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.message.is-error {
+  color: var(--error-on-dark);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .message {
+    transition: none;
+  }
+}
+
+@media (max-width: 1120px) {
+  .workspace {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 980px) {
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    gap: 28px;
+    padding-top: 48px;
+  }
+}
+
+@media (max-width: 760px) {
+  .shell {
+    width: min(100% - 32px, 1200px);
+    padding-top: 14px;
+  }
+
+  /* 首访移动端 hero 716px 营销墙：h1 降级、统计保持 3 列横排，
+     表单与工作区回到首屏附近。 */
+  .hero {
+    padding: 28px 0 24px;
+  }
+
+  h1 {
+    font-size: 30px;
+  }
+
+  .lede {
+    font-size: 16px;
+  }
+
+  /* 触控目标：36px/34px 桌面密度在手指下不可靠，全部提到 44px。 */
+  .icon-button {
+    width: 44px;
+    height: 44px;
+    min-height: 44px;
+  }
+
+  .actions button,
+  .metadata-actions button,
+  .empty-action {
+    min-height: 44px;
+  }
+
+  .group-enable-all,
+  .group-enable-global {
+    height: 44px;
+  }
+
+  .group-disable-all {
+    width: 44px;
+    min-width: 44px;
+    height: 44px;
+  }
+
+  .project-chip {
+    grid-template-columns: minmax(0, 1fr) 44px;
+    min-height: 44px;
+  }
+
+  .project-chip-remove {
+    width: 44px;
+    min-height: 44px;
+  }
+
+  /* 26 个标签堆成 337px 的墙会把列表推出屏外：窄屏隐藏滚动条（渐隐遮罩提示）。
+     nowrap + 横向滚动已是 .tag-tabs 基础样式，桌面同样生效。 */
+  .tag-tabs {
+    scrollbar-width: none;
+  }
+
+  .tag-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .category-tab {
+    flex: 0 0 auto;
+    min-height: 44px;
+  }
+
+  .group-toggle {
+    min-height: 44px;
+  }
+
+  input,
+  select,
+  textarea {
+    min-height: 44px;
+  }
+
+  .project-chip-path,
+  .project-chip-remove {
+    min-height: 44px;
+  }
+
+  .controls button {
+    min-height: 44px;
+  }
+
+  .library-search input {
+    min-height: 44px;
+  }
+
+  .message-region {
+    right: 12px;
+    bottom: 12px;
+    max-width: calc(100vw - 24px);
+  }
+
+  .topbar {
+    min-height: 56px;
+  }
+
+  .topbar-link {
+    width: 36px;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .topbar-link-label {
+    display: none;
+  }
+
+  .hero {
+    padding: 40px 0 28px;
+  }
+
+  .hero.is-compact {
+    padding: 20px 0 24px;
+  }
+
+  .hero.is-compact .product-surface {
+    gap: 10px 14px;
+  }
+
+  .hero.is-compact .surface-header strong {
+    display: none;
+  }
+
+  .hero.is-compact .surface-grid {
+    flex: 1 1 220px;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .hero.is-compact .surface-grid div {
+    min-width: 0;
+  }
+
+  .hero.is-compact .surface-grid span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .hero.is-compact .surface-path {
+    flex-basis: 100%;
+    text-align: left;
+  }
+
+  h1 {
+    font-size: 30px;
+  }
+
+  .controls {
+    grid-template-columns: 1fr;
+  }
+
+  /* 移动端单列时原件库（主工作流）排到只读的已启用面板之前。 */
+  .library-panel {
+    order: -1;
+  }
+
+  .panel-title {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .panel-title select {
+    width: 100%;
+  }
+}
+
+@media (max-width: 520px) {
+  /* 组头操作区（项目 +/× + 全局 +/× + 图例）整行换到标题与徽标下方，
+     徽标已随标题留在首行。 */
+  .group-actions {
+    flex: 1 1 100%;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+}