/* ═══════════════════════════════════════════════════════════════
   commercial.css - 苹果风格(2026-08-16 v9)
   设计语言:
   - 系统蓝 #007AFF 只做状态锚点(选中/链接/主按钮),不铺开
   - 中性为主: iOS 灰阶,白/浅灰/近黑
   - 材质: 毛玻璃 backdrop-blur + 分层微阴影,不用硬边框
   - 圆角: 卡片 14px / 按钮 10px / 弹窗 18px
   - 字体: 系统栈,字重分级(SF 风格)
   - 登录页: 居中极简单列
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  /* ── 中性色 iOS 灰阶(深色) ── */
  --bg: #0e0f11;
  --surface: rgba(28, 29, 32, 0.72);   /* 毛玻璃卡片 */
  --surface2: #1e1f23;
  --surface3: #2a2b30;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f5f5f7;
  --text-secondary: #a1a1a6;
  --muted: #6e6e73;
  --overlay-bg: rgba(0, 0, 0, 0.5);

  /* ── TestStar 蓝(商务 E 方案) ── */
  --accent: #2383e2;
  --accent-hover: #1e6fcc;
  --accent-active: #1b5eb5;
  --accent-text: #ffffff;
  --accent-weak: rgba(35, 131, 226, 0.14);
  --accent-border: rgba(35, 131, 226, 0.4);

  /* ── 语义(iOS 原生色) ── */
  --success: #0F7B0F;
  --success-weak: rgba(15, 123, 15, 0.10);
  --warning: #B45309;
  --warning-weak: rgba(180, 83, 9, 0.10);
  --danger: #E03E3E;
  --danger-weak: rgba(224, 62, 62, 0.10);
  --info: #2383e2;
  --info-weak: rgba(35, 131, 226, 0.14);

  /* ── 历史变量映射 ── */
  --hg-yellow: var(--accent);
  --hg-yellow-hover: var(--accent-hover);
  --pass: #0F7B0F;
  --fail: #E03E3E;
  --warn: #B45309;
  --skip: #6e6e73;
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-active: rgba(35, 131, 226, 0.18);
  --row-hover: rgba(255, 255, 255, 0.05);
  --card-bg: rgba(28, 29, 32, 0.72);
  --code-bg: rgba(35, 131, 226, 0.08);
  --code-border: rgba(35, 131, 226, 0.2);
  --table-head-bg: rgba(255, 255, 255, 0.04);
  --sidebar-bg: rgba(22, 23, 25, 0.85);
  --topbar-bg: rgba(22, 23, 25, 0.72);
  --status-glow: rgba(35, 131, 226, 0.25);
  --grid-line: transparent;
  --hud-scanline: transparent;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

[data-theme="light"] {
  /* ── 中性色 iOS 灰阶(浅色) ── */
  --bg: #f2f2f7;
  --surface: rgba(255, 255, 255, 0.82);
  --surface2: #e8e8ed;
  --surface3: #d8d8de;
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --muted: #86868b;
  --overlay-bg: rgba(0, 0, 0, 0.3);

  /* ── TestStar 蓝(商务 E 方案) ── */
  --accent: #2383e2;
  --accent-hover: #1b6fc9;
  --accent-active: #185dab;
  --accent-text: #ffffff;
  --accent-weak: rgba(35, 131, 226, 0.1);
  --accent-border: rgba(35, 131, 226, 0.35);

  /* ── 语义 ── */
  --success: #0F7B0F;
  --success-weak: rgba(15, 123, 15, 0.10);
  --warning: #B45309;
  --warning-weak: rgba(180, 83, 9, 0.10);
  --danger: #E03E3E;
  --danger-weak: rgba(224, 62, 62, 0.10);
  --info: #2383e2;
  --info-weak: rgba(35, 131, 226, 0.1);

  /* ── 历史变量映射 ── */
  --hg-yellow: var(--accent);
  --hg-yellow-hover: var(--accent-hover);
  --pass: #0F7B0F;
  --fail: #E03E3E;
  --warn: #B45309;
  --skip: #86868b;
  --nav-hover: rgba(0, 0, 0, 0.04);
  --nav-active: rgba(35, 131, 226, 0.12);
  --row-hover: rgba(0, 0, 0, 0.03);
  --card-bg: rgba(255, 255, 255, 0.82);
  --code-bg: rgba(35, 131, 226, 0.06);
  --code-border: rgba(35, 131, 226, 0.2);
  --table-head-bg: rgba(0, 0, 0, 0.03);
  --sidebar-bg: rgba(242, 242, 247, 0.92);
  --topbar-bg: rgba(242, 242, 247, 0.82);
  --status-glow: rgba(35, 131, 226, 0.15);
  --grid-line: transparent;
  --hud-scanline: transparent;
}

/* ═════ 全局:去网格/扫描线 ═════ */
body { background-image: none !important; background-color: var(--bg); }
.content { background: transparent; }

/* ═════ 圆角体系(苹果分级) ═════ */
.btn { gap: 6px;
  clip-path: none !important;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 1.05rem;
  transition: all 0.15s ease;
}
.vs-req-suite, .vs-req-mod, .vs-req-stat-card, .vs-req-actions,
.vs-req-suite-top, .vs-req-suite-docbar, .vs-case-item, .vs-batch-card, .vs-card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
}
.nav-group-toggle { border-radius: 10px; }
.vs-panel-label, .vs-stat-pill, .nav-group-label, .topbar .badge, .sys-status {
  text-transform: none; letter-spacing: 0; font-weight: 600;
}

/* ═════ 排版去终端化(2026-08-17 HUD→商务):标签/标题去大写/去松距/去等宽 ═════
   仅清理排版层,SQL/YAML/代码/CASE ID 的等宽保留(专业工具标配) */
.vs-page-title-wrap h2, .vs-page-title-wrap h3,
.vs-panel-head, .vs-panel-label,
.vs-editor-head h3, .vs-editor-head .vs-panel-label,
.vs-run-log-head, .vs-report-modal-head h3,
.vs-agent-yaml-head, .vs-form-field label,
.vs-field-label, .vs-mapping-kind,
.vs-progress-label, .vs-radio-label,
.vs-import-mode .vs-panel-label,
.vs-suites-head, .vs-section-title,
.vst-list-head, .vst-field-label,
.vsk-stat-label, .vss-picker-head,
.dash-card-label, .vs-req-mod-label, .vs-req-field-label,
.vs-req-* .vs-req-*label,
.vs-page-header .vs-page-title {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font);
}

/* 需求转用例模块(vs-req)批量: 标签去终端化 */
.vs-req-group-label, .vs-req-progress-label, .vs-req-col-head,
.vs-req-detail-head, .vs-req-mod-head, .vs-req-case-head,
.vs-req-table-head, .vs-req-home-suite-head, .vs-req-sec-head,
.vs-req-card-head, .vs-req-meta-label {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font);
}

/* ═════ 毛玻璃:卡片/侧栏/顶栏 ═════ */
.vs-req-actions, .vs-req-suite-top, .vs-req-suite-docbar,
.vs-req-suite, .vs-req-mod, .vs-case-item, .vs-req-current {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
}
.sidebar {
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.topbar { background: var(--topbar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ═════ 导航选中:系统蓝淡底 ═════ */
.nav-sub-item.active {
  color: var(--accent) !important;
  background: var(--nav-active) !important;
  border-left-color: transparent !important;
  border-radius: 8px;
}
.nav-sub-item.active::before { color: var(--accent) !important; }
.nav-sub-item.active .nav-sub-ico { color: var(--accent) !important; }

/* ═════ 按钮:苹果式 ═════ */
.btn { background: var(--accent); color: var(--accent-text); border: none; }
.btn:hover { background: var(--accent-hover); }
.btn.secondary { background: var(--surface2); color: var(--text); border: none; }
.btn.secondary:hover { background: var(--surface3); color: var(--accent); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }

/* ═════ Logo ═════ */
.logo-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #1A1A1A;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.logo-name { font-size: 1.1rem; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
/* ═════ 登录页样式已迁移至 app.css（E 方案：商务分栏）═════ */

/* ═════ 图标 ═════ */
.ico-inline, .vs-req-ico-inline, .vs-req-suite-ico { display: inline-flex; align-items: center; vertical-align: -2px; }
.ico-inline svg, .vs-req-ico-inline svg { vertical-align: -2px; margin-right: 7px; color: var(--muted); }
.vs-req-suite-ico { color: var(--accent); margin-right: 5px; }
/* 2026-09-11: 去掉 !important + 加 :not([hidden]) 守卫—— 之前 display:flex !important
   会强制覆盖 HTML 的 hidden 属性, 让未登录态下的 fab 仍然显示。 现在用 :not([hidden])
   让 hidden 属性有最高优先级(浏览器原生 hidden 用 display:none) */
#vs-chat-fab:not([hidden]) { display: flex; align-items: center; justify-content: center; color: var(--accent-text); }
.vs-req-doc-view { display: inline-flex; }
.vs-ce-yaml { color: var(--accent) !important; }



/* ═════ 图标与文字间距统一 ═════ */
.ico-inline, .vs-req-ico-inline, .vs-req-suite-ico { gap: 6px; }
.nav-sub-ico { margin-right: 9px; }
.vs-req-mod-toggle svg, .vs-req-case-toggle svg { margin-right: 6px; }
button svg, .btn svg { margin-right: 4px; }
.vs-panel-label svg { margin-right: 6px; }

/* ═══════════════════════════════════════════════════════════
   G 风格锁定（2026-08-17 · 一比一 app-design-G.html）
   主应用固定 G 亮色商务风:不再随 data-theme 变色
   ═══════════════════════════════════════════════════════════ */

/* —— 强制亮色变量(dark 也生效) —— */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --bg: #F7F7F5;
  --bg-panel: #FFFFFF;
  --surface: #FFFFFF;
  --surface2: #F7F7F5;
  --surface3: #EFEFED;
  --line: #E5E5E2;
  --line-strong: #D4D4D1;
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);
  --text: #1A1A1A;
  --text-secondary: #6B7280;
  --muted: #6B7280;
  --hint: #9CA3AF;
  --accent: #2383E2;
  --accent-hover: #1E6FCC;
  --accent-active: #1B5EB5;
  --accent-text: #ffffff;
  --accent-weak: rgba(35, 131, 226, 0.08);
  --accent-border: rgba(35, 131, 226, 0.4);
  --success: #0F7B0F;
  --pass: #0F7B0F;
  --success-weak: rgba(15, 123, 15, 0.10);
  --danger: #E03E3E;
  --fail: #E03E3E;
  --danger-weak: rgba(224, 62, 62, 0.10);
  --warning: #B45309;
  --warn: #B45309;
  --warning-weak: rgba(180, 83, 9, 0.10);
  --info: #2383E2;
  --info-weak: rgba(35, 131, 226, 0.08);
  --skip: #6B7280;
  --overlay-bg: rgba(26, 35, 50, 0.45);
  --nav-hover: rgba(0, 0, 0, 0.04);
  --nav-active: rgba(35, 131, 226, 0.08);
  --row-hover: rgba(0, 0, 0, 0.03);
  --card-bg: #FFFFFF;
  --code-bg: rgba(35, 131, 226, 0.06);
  --code-border: rgba(35, 131, 226, 0.2);
  --table-head-bg: rgba(0, 0, 0, 0.02);
  --sidebar-bg: #FFFFFF;
  --sidebar-shadow: rgba(26, 35, 50, 0.04);
  --topbar-bg: #FFFFFF;
  --status-glow: rgba(35, 131, 226, 0.12);
  --watermark-opacity: 0;
  color-scheme: light;
}

body { background-color: #F7F7F5; }

/* —— 侧栏:白底实心,无边框阴影,右分隔线 —— */
.sidebar {
  width: 232px;
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid #E5E5E2;
  box-shadow: none !important;
  padding: 16px 12px;
}
.logo { border-bottom: 1px solid #E5E5E2; padding: 6px 12px 14px; margin-bottom: 10px; }
.logo-mark {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: #1A1A1A !important;
  color: #fff;
}
/* —— G 式扁平导航 —— */

nav .nav-group-label {
  font-size: 13px;
  color: #6B7280;
  font-weight: 700;
  padding: 16px 12px 6px;
  text-transform: none;
  letter-spacing: 0;
}
.sidebar .nav-sub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px !important;
  border-radius: 6px;
  font-size: 14px;
  color: #6B7280;
  margin: 1px 0;
  border-left: none !important;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s, color 0.15s;
}
.sidebar .nav-sub-item:hover { background: #F7F7F5; color: #1A1A1A; }
.sidebar .nav-sub-item.active {
  background: rgba(35, 131, 226, 0.08) !important;
  color: #2383E2 !important;
  font-weight: 600;
}
.sidebar .nav-sub-item.active .nav-sub-ico { color: #2383E2 !important; }
.nav-sub-ico { margin-right: 0; display: inline-flex; }
.nav-sub-ico svg { color: #9CA3AF; }

/* —— 顶栏:白底 + 下分隔线 —— */
.topbar {
  height: 56px;
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E5E5E2;
  box-shadow: none !important;
}
.topbar .current-user { font-family: var(--font) !important; letter-spacing: 0 !important; font-weight: 600 !important; }
.sys-status { font-family: var(--font); text-shadow: none; color: #6B7280; }

/* —— 内容区 —— */
.content { background: transparent; }

/* —— 按钮:primary 蓝 / secondary 白底描边(G 精确) —— */
.btn { background: #2383E2; color: #fff; border: none; border-radius: 6px; }
.btn:hover { background: #1E6FCC; }
.btn.secondary { background: #F7F7F5; color: #1A1A1A; border: 1px solid #D4D4D1; }
.btn.secondary:hover { background: #FFFFFF; border-color: #2383E2; color: #2383E2; }
.btn.danger { background: transparent; color: #E03E3E; border: 1px solid #E03E3E; }
.btn.danger:hover { background: #E03E3E; color: #fff; }

/* —— 卡片/表格:白底 + 浅边框 + 10px 圆角(G) —— */
.vs-req-suite, .vs-req-mod, .vs-req-stat-card, .vs-req-actions,
.vs-req-suite-top, .vs-req-suite-docbar, .vs-case-item, .vs-batch-card, .vs-card,
.stat-card, .card {
  background: #FFFFFF;
  border: 1px solid #E5E5E2;
  border-radius: 10px;
  box-shadow: none;
  backdrop-filter: none;
}
table thead th { color: #9CA3AF; border-bottom: 1px solid #E5E5E2; }
table tbody td { border-bottom-color: #F7F7F5; }

/* —— 徽标/状态胶囊 —— */
.badge { background: #F7F7F5; color: #6B7280; border: 1px solid #E5E5E2; box-shadow: none; letter-spacing: 0; }
.vs-stat-pill { font-family: var(--font); }

/* —— 统一按钮尺寸(G 商务:固定高度三档,消除参差) —— */
/* 标准按钮:34px */
.btn {
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  line-height: 34px;
  border-radius: 6px;
  gap: 6px;
}
/* 大按钮:40px（主 CTA / 页面级操作) */
.btn.btn-lg, .btn-lg {
  height: 40px;
  padding: 0 24px;
  font-size: 14px;
  line-height: 40px;
}
/* 小按钮:28px（工具栏/紧凑操作) */
.btn.btn-sm, .btn-sm, .vst-btn-sm, .vs-btn-sm, .vs-run-log-copy, .vs-run-log-close {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 28px;
}
/* 图标按钮:正方形 */
.btn.icon-btn, .icon-btn {
  width: 34px;
  padding: 0;
  height: 34px;
  line-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.icon-btn { font-size: 15px; }
/* 顶栏退出等历史 btn:不带 btn-sm 的强行归位到标准 */
#btn-logout { height: 30px; line-height: 30px; padding: 0 12px; font-size: 12px; }

/* —— 统一字体分档(G 商务:4 档清晰层级) —— */
/* L1 标题:20px */
.vs-page-title-wrap h2, .vs-title, .page-title, h2 {
  font-size: 20px !important;
  letter-spacing: -0.3px;
}
.vs-section-title, .vs-card-title, .card-title, h3 {
  font-size: 14px !important;
}
/* L2 导航 + 分区标签:14px */
.vs-panel-label, .vs-panel-head, .nav-sub-item, .vs-editor-sub {
  font-size: 14px !important;
}
/* L3 正文主力:13px（表单标签 + 按钮 + 复选框 + 描述） */
.vs-intro, .vs-param-label, .vs-field-label,
label, .vs-footer-field label, .vs-form-field label,
.vst-check span, .vs-check span, .vs-radio-label span, .vs-run-options span {
  font-size: 13px !important;
}
/* L4 辅助:12px（徽标 + stat值 + 备注 + 元数据） */
.vs-stat-pill, .stat-value span, .vs-hint, .badge,
.vs-template-badge, .vs-param-optional, .vs-meta,
.vs-run-log-sub {
  font-size: 12px !important;
  color: var(--muted, #6B7280);
}

/* —— 统一输入框/文本域/代码区背景(G 商务:白底+浅灰边,不透明黑) —— */
.vs-param-input,
.vs-steps-input, .vs-step-textarea,
.vs-workshop-yaml, .vs-run-log-content,
.vst-yaml, .vst-log-content,
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  background: #FFFFFF !important;
  border: 1px solid #D4D4D1 !important;
  color: #1A1A1A !important;
}
.vs-param-input:hover, .vs-param-input:focus,
input[type="text"]:focus, .vs-step-textarea:focus,
.vs-workshop-yaml:focus, textarea:focus, select:focus {
  border-color: #2383E2 !important;
  box-shadow: 0 0 0 2px rgba(35, 131, 226, 0.12) !important;
}
/* 代码区/日志区保留等宽 + 极浅灰底 */
.vs-workshop-yaml, .vs-run-log-content, .vst-yaml, .vst-log-content {
  background: #F7F7F5 !important;
  font-family: "SF Mono", ui-monospace, Menlo, monospace !important;
}

/* —— 压平杂乱的透明度背景(白/蓝透明变体)为干净色 —— */
.vs-workshop-section, .vs-workshop-aside,
.vs-template-badge, .vs-req-*.vs-card,
.vs-panel-head, .vs-run-log-panel,
.vs-chat-panel-head, .vs-skills-meta,
.vs-req-suite-top, .vs-req-suite-docbar {
  background: #FFFFFF !important;
}
/* stat-pill:去掉透明度蓝,改浅灰底 */
.vs-stat-pill, .vs-stat-pill-accent {
  background: #F7F7F5 !important;
  color: #6B7280 !important;
  border: 1px solid #E5E5E2 !important;
}
.vs-stat-pill-accent {
  color: #2383E2 !important;
  border-color: rgba(35, 131, 226, 0.3) !important;
}
/* 行 hover:统一浅灰 */
.vs-case-item:hover, .vs-row-row:hover, .vs-req-actions:hover,
.vs-step-head:hover, tr:hover, tbody tr:hover {
  background: #F7F7F5 !important;
}

/* ============================================================
   应用壳 & 各页统一精致化 (frontend-design 2026-08-21)
   保持 G 亮色商务扁平骨架,叠加信号与轻深度。
   ============================================================ */

/* Logo:品牌渐变 */
.sidebar .logo-mark { background: linear-gradient(150deg, #3b92e8, #1E6FCC); }

/* 导航分组标签 + 图标悬停随动 */
nav .nav-group-label { position: relative; color: #7A7F89; letter-spacing: .01em; }
.sidebar .nav-sub-item .nav-sub-ico svg { transition: color .15s; }
.sidebar .nav-sub-item:hover .nav-sub-ico svg { color: #2383E2; }
.sidebar .nav-sub-item:hover { background: #F2F2F0; }

/* 激活项:左侧 accent 强调条(贴合 G,信号更强) */
.sidebar .nav-sub-item.active { position: relative; }
.sidebar .nav-sub-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: #2383E2;
}

/* ═══════════════════════════════════════════════════════════
   「亮点」菜单图标 · 语义微动效 (2026-09-01)
   悬停 / 激活时，每个图标按它自己的形象动——
   套件调度是闹钟 → 分针真的跳一下；仪表盘 → 柱子像均衡器逐段跳；
   齿轮 → 转一格；闪电 → 闪一下；地球 → 转；耳机线 → 提示点闪烁……
   不是无脑整体缩放，而是贴合图形本身含义，靠 data-page 定位到部件。
   ═══════════════════════════════════════════════════════════ */

/* ── 仪表盘:三根柱像均衡器一样逐段弹 ── */
.sidebar .nav-sub-item[data-page="vision-star-dashboard"] svg line { transform-box: stroke-box; transform-origin: center bottom; }
.sidebar .nav-sub-item[data-page="vision-star-dashboard"]:hover svg line,
.sidebar .nav-sub-item[data-page="vision-star-dashboard"].active svg line { animation: vni-bar 0.5s cubic-bezier(.34,1.56,.64,1); }
.sidebar .nav-sub-item[data-page="vision-star-dashboard"] svg line:nth-child(1){ animation-delay:.14s }
.sidebar .nav-sub-item[data-page="vision-star-dashboard"] svg line:nth-child(2){ animation-delay:.02s }
.sidebar .nav-sub-item[data-page="vision-star-dashboard"] svg line:nth-child(3){ animation-delay:.24s }

/* ── AI 生成用例:四芒星"眨一下"发光 ── */
.sidebar .nav-sub-item[data-page="vision-star-agent"] svg path { transform-box: fill-box; transform-origin: center; }
.sidebar .nav-sub-item[data-page="vision-star-agent"]:hover svg path,
.sidebar .nav-sub-item[data-page="vision-star-agent"].active svg path { animation: vni-sparkle .55s cubic-bezier(.34,1.56,.64,1); }

/* ── 模板创建 / 用例生成(file-text):内容行像打字一样逐行浮现 ── */
.sidebar .nav-sub-item[data-page="vision-star-template"] svg line,
.sidebar .nav-sub-item[data-page="vision-star-requirement"] svg line { transform-box: stroke-box; transform-origin: left center; }
.sidebar .nav-sub-item[data-page="vision-star-template"]:hover svg line,
.sidebar .nav-sub-item[data-page="vision-star-template"].active svg line,
.sidebar .nav-sub-item[data-page="vision-star-requirement"]:hover svg line,
.sidebar .nav-sub-item[data-page="vision-star-requirement"].active svg line { animation: vni-typed 0.5s cubic-bezier(.34,1.56,.64,1); }
.sidebar .nav-sub-item[data-page="vision-star-template"] svg line:nth-child(3),
.sidebar .nav-sub-item[data-page="vision-star-requirement"] svg line:nth-child(3){ animation-delay:.1s }
.sidebar .nav-sub-item[data-page="vision-star-template"] svg line:nth-child(4),
.sidebar .nav-sub-item[data-page="vision-star-requirement"] svg line:nth-child(4){ animation-delay:.22s }

/* ── 导入转换:下行的箭头"点一下头" ── */
.sidebar .nav-sub-item[data-page="vision-star-import"] svg polyline,
.sidebar .nav-sub-item[data-page="vision-star-import"] svg line { transform-box: stroke-box; }
.sidebar .nav-sub-item[data-page="vision-star-import"]:hover svg polyline,
.sidebar .nav-sub-item[data-page="vision-star-import"].active svg polyline,
.sidebar .nav-sub-item[data-page="vision-star-import"]:hover svg line,
.sidebar .nav-sub-item[data-page="vision-star-import"].active svg line { animation: vni-drop 0.5s cubic-bezier(.34,1.56,.64,1); }

/* ── UI 测试库(folder):开口轻轻一扇 ── */
.sidebar .nav-sub-item[data-page="vision-star"] svg path { transform-box: fill-box; transform-origin: center top; }
.sidebar .nav-sub-item[data-page="vision-star"]:hover svg path,
.sidebar .nav-sub-item[data-page="vision-star"].active svg path { animation: vni-folder 0.5s cubic-bezier(.34,1.56,.64,1); }

/* ── 套件调度(闹钟/时钟):分针真的跳一下 ── */
.sidebar .nav-sub-item[data-page="vision-star-suites"] svg polyline { transform-box: view-box; transform-origin: center; }
.sidebar .nav-sub-item[data-page="vision-star-suites"]:hover svg polyline,
.sidebar .nav-sub-item[data-page="vision-star-suites"].active svg polyline { animation: vni-tick 0.6s cubic-bezier(.34,1.56,.64,1); }

/* ── 设备中心(4宫格):像加载动画那样九宫格鼓点 ── */
.sidebar .nav-sub-item[data-page="vision-star-farm"] svg rect { transform-box: fill-box; transform-origin: center; }
.sidebar .nav-sub-item[data-page="vision-star-farm"]:hover svg rect,
.sidebar .nav-sub-item[data-page="vision-star-farm"].active svg rect { animation: vni-cell 0.5s cubic-bezier(.34,1.56,.64,1); }
.sidebar .nav-sub-item[data-page="vision-star-farm"] svg rect:nth-child(1){ animation-delay:.04s }
.sidebar .nav-sub-item[data-page="vision-star-farm"] svg rect:nth-child(2){ animation-delay:.16s }
.sidebar .nav-sub-item[data-page="vision-star-farm"] svg rect:nth-child(3){ animation-delay:.1s }
.sidebar .nav-sub-item[data-page="vision-star-farm"] svg rect:nth-child(4){ animation-delay:.22s }

/* ── WEB(地球):纬线一扫 + 赤道微扭,像球转了一下 ── */
.sidebar .nav-sub-item[data-page="vision-star-web"] svg path { transform-box: stroke-box; transform-origin: center; }
.sidebar .nav-sub-item[data-page="vision-star-web"]:hover svg path,
.sidebar .nav-sub-item[data-page="vision-star-web"].active svg path { animation: vni-globe 0.6s cubic-bezier(.34,1.56,.64,1); }

/* ── Android / iOS(手机):听筒/Home 条呼吸闪烁一下 ── */
.sidebar .nav-sub-item[data-page="vision-star-android"] svg line,
.sidebar .nav-sub-item[data-page="vision-star-ios"] svg line { transform-box: stroke-box; transform-origin: center; }
.sidebar .nav-sub-item[data-page="vision-star-android"]:hover svg line,
.sidebar .nav-sub-item[data-page="vision-star-android"].active svg line,
.sidebar .nav-sub-item[data-page="vision-star-ios"]:hover svg line,
.sidebar .nav-sub-item[data-page="vision-star-ios"].active svg line { animation: vni-blink 0.55s cubic-bezier(.34,1.56,.64,1); }

/* ── HarmonyOS(同心圆):涟漪从圆心荡开一圈 ── */
.sidebar .nav-sub-item[data-page="vision-star-harmony"] svg circle:nth-child(2) { transform-box: fill-box; transform-origin: center; }
.sidebar .nav-sub-item[data-page="vision-star-harmony"]:hover svg circle:nth-child(2),
.sidebar .nav-sub-item[data-page="vision-star-harmony"].active svg circle:nth-child(2) { animation: vni-ripple 0.6s ease-out; }

/* ── 桌面(显示器):屏幕亮光一闪 ── */
.sidebar .nav-sub-item[data-page="vision-star-desktop"]:hover svg,
.sidebar .nav-sub-item[data-page="vision-star-desktop"].active svg { animation: vni-glow 0.5s ease-out; }

/* ── 知识库(书本):书脊翻开一页又合上 ── */
.sidebar .nav-sub-item[data-page="vision-star-knowledge"] svg path:nth-child(2) { transform-box: fill-box; transform-origin: left center; }
.sidebar .nav-sub-item[data-page="vision-star-knowledge"]:hover svg path:nth-child(2),
.sidebar .nav-sub-item[data-page="vision-star-knowledge"].active svg path:nth-child(2) { animation: vni-leaf 0.6s cubic-bezier(.34,1.56,.64,1); }

/* ── 页面知识库(数据库桶):一行数据条"掉"了一下 ── */
.sidebar .nav-sub-item[data-page="vision-star-page-kb"] svg path:nth-child(2) { transform-box: stroke-box; }
.sidebar .nav-sub-item[data-page="vision-star-page-kb"]:hover svg path:nth-child(2),
.sidebar .nav-sub-item[data-page="vision-star-page-kb"].active svg path:nth-child(2) { animation: vni-blob 0.5s cubic-bezier(.34,1.56,.64,1); }

/* ── Skill 管理(闪电):劈一下,闪一下 ── */
.sidebar .nav-sub-item[data-page="vision-star-skills"] svg polygon { transform-box: fill-box; transform-origin: center; }
.sidebar .nav-sub-item[data-page="vision-star-skills"]:hover svg polygon,
.sidebar .nav-sub-item[data-page="vision-star-skills"].active svg polygon { animation: vni-zap 0.45s cubic-bezier(.34,1.56,.64,1); }

/* ── 系统设置(齿轮):转一格就回位 ── */
.sidebar .nav-sub-item[data-page="vision-star-settings"]:hover svg,
.sidebar .nav-sub-item[data-page="vision-star-settings"].active svg { animation: vni-gear 0.6s cubic-bezier(.34,1.56,.64,1); transform-box: view-box; transform-origin: center; }

/* —— 尊重系统"减弱动效"偏好:全关 —— */
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-sub-item svg, .sidebar .nav-sub-item svg * { animation: none !important; }
}

/* ────────── 关键帧定义 ────────── */
@keyframes vni-bar   { 0%{ transform: scaleY(.3) } 60%{ transform: scaleY(1.35) } 100%{ transform: scaleY(1) } }
@keyframes vni-sparkle { 0%{ transform: rotate(0) scale(1) } 30%{ transform: rotate(45deg) scale(1.3) } 60%{ transform: rotate(-12deg) scale(.9) } 100%{ transform: rotate(0) scale(1) } }
@keyframes vni-typed { 0%{ transform: scaleX(.4); opacity:.3 } 60%{ transform: scaleX(1.06); opacity:1 } 100%{ transform: scaleX(1) } }
@keyframes vni-drop  { 0%{ transform: translateY(0) } 45%{ transform: translateY(2.5px) } 70%{ transform: translateY(-1px) } 100%{ transform: translateY(0) } }
@keyframes vni-folder{ 0%{ transform: scaleY(1) } 40%{ transform: scaleY(.88) } 70%{ transform: scaleY(1.07) } 100%{ transform: scaleY(1) } }
@keyframes vni-tick  { 0%{ transform: rotate(0) } 25%{ transform: rotate(14deg) } 50%{ transform: rotate(-8deg) } 75%{ transform: rotate(4deg) } 100%{ transform: rotate(0) } }
@keyframes vni-cell  { 0%{ transform: scale(1) } 35%{ transform: scale(1.35) } 65%{ transform: scale(.88) } 100%{ transform: scale(1) } }
@keyframes vni-globe { 0%{ transform: rotate(0) scaleX(1) } 40%{ transform: rotate(-14deg) scaleX(.72) } 100%{ transform: rotate(0) scaleX(1) } }
@keyframes vni-blink { 0%,100%{ transform: scaleX(1); opacity:.35 } 50%{ transform: scaleX(.4); opacity:1 } }
@keyframes vni-ripple{ 0%{ transform: scale(0); opacity:0 } 35%{ transform: scale(1.7); opacity:1 } 70%{ transform: scale(2.3); opacity:0 } 100%{ transform: scale(0); opacity:0 } }
@keyframes vni-glow  { 0%{ filter: brightness(1) } 30%{ filter: brightness(1.7) } 60%{ filter: brightness(1) } 100%{ filter: brightness(1) } }
@keyframes vni-leaf  { 0%{ transform: rotate(0) } 45%{ transform: rotate(-7deg) } 100%{ transform: rotate(0) } }
@keyframes vni-blob  { 0%{ transform: translateY(0) } 40%{ transform: translateY(2px) } 75%{ transform: translateY(-1px) } 100%{ transform: translateY(0) } }
@keyframes vni-zap   { 0%{ transform: scaleX(1); opacity:1 } 30%{ transform: scaleX(.55); opacity:.5 } 60%{ transform: scaleX(1.16); opacity:1 } 100%{ transform: scaleX(1) } }
@keyframes vni-gear  { 0%{ transform: rotate(0) } 40%{ transform: rotate(-18deg) } 75%{ transform: rotate(8deg) } 100%{ transform: rotate(0) } }

/* 面板/节标题:统一 accent 左条 */
.vs-panel-label { position: relative; padding-left: 10px; }
.vs-panel-label::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 12px; border-radius: 2px; background: #2383E2;
}

/* 页头:标题收紧 + 下方细分隔线 */
.vs-page-header { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid #EDEDEA; }
.vs-page-header h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.2px; }

/* 内容卡:轻深度(精致) */
.card, .stat-card, .vs-card, .vsk-stat-card, .vs-step-card, .vs-suites-panel,
.vs-req-suite, .vs-batch-card {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px -24px rgba(16, 24, 40, 0.28);
  border-radius: 12px;
}

/* ============================================================
   仪表盘 & 知识库/Skill 精致化 (frontend-design 2026-08-21)
   ============================================================ */

/* —— 仪表盘 —— */
.dash-cards { gap: 1rem; margin: 4px 1.5rem 1.25rem; }
.dash-card, .dash-section {
  border-radius: 12px;
  border-color: #E5E5E2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px -24px rgba(16, 24, 40, 0.28);
}
.dash-section h3 { position: relative; padding-left: 10px; }
.dash-section h3::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 11px; border-radius: 2px; background: #2383E2;
}
.dash-card-label, .vsk-stat-label { letter-spacing: .02em; }
.dash-card-value { color: #1A1A1A; }

/* —— 知识库 / Skill —— */
.vsk-stat-card {
  border-radius: 12px;
  border-color: #E5E5E2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px -24px rgba(16, 24, 40, 0.28);
}
.vsk-tabs { gap: 0.5rem; }
.vsk-tab { transition: color .15s, border-color .15s; }
.vsk-tab:hover { background: #F2F2F0; border-radius: 8px 8px 0 0; }
.vsk-tab.active { border-bottom-width: 2px; }

/* —— 通用列表/条目的悬停轻反馈 —— */
.vs-panel-top, .vs-table-card { border-radius: 12px; }

/* —— 仪表盘概览卡：明显 accent 左条 + 轻渐变（可一眼辨认）—— */
.dash-card {
  background: linear-gradient(180deg, #FFFFFF, #FBFAF8);
  border-left: 3px solid #2383E2;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px -24px rgba(16, 24, 40, 0.28);
}

/* ============================================================
   UI 精致化提升层 (frontend-design · 决定性一版 2026-08-21)
   目标:从"扁平灰白"的质感,提升到"清透、有层级、细节经得起看"。
   全部继承到各页;若某处被顶,再单独收敛。
   ============================================================ */

/* ── 字体 · 清晰扛反锯齿 + 层级 ── */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: .005em; }
.vs-page-header h2,
.vs-page-header-top h2,
.vs-header h2 { font-weight: 750; letter-spacing: -.02em; color:#111827; }
.vs-intro, .vs-page-header .vs-intro { color:#8A8F98; }
.vs-panel-label { font-weight: 600; letter-spacing: .005em; color:#3A3F4B; }

/* ── 表面 · 柔和分层阴影 + 更大圆角 (让白卡有呼吸感) ── */
.vs-panel, .vs-card, .vs-section, .dash-section, .dash-card, .vsk-stat-card,
.vs-step-card, .vs-req-suite, .vs-batch-card, .vs-case-item,
.vs-run-log-panel, .vs-chat-panel, .vs-aside-panel, .vs-table-card,
.vs-workshop-section, .vs-suites-panel {
  border: 1px solid rgba(17, 24, 39, 0.05);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.03),
    0 1px 1px rgba(17, 24, 39, 0.02),
    0 14px 34px -22px rgba(17, 24, 39, 0.18);
  background: #FFFFFF;
}

/* ── 控件 · 圆角/内阴影/聚焦环 ── */
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  border-radius: 8px !important;
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.04) !important;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: #2383E2 !important;
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.14) !important;
}

/* ── 按钮 · 圆角 + 微阴影 + 悬停上浮 ── */
.btn, button[type="button"].btn, button[type="submit"].btn {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 12px -7px rgba(35, 131, 226, 0.4);
  transition: transform .12s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px -7px rgba(35, 131, 226, 0.5); }
.btn.secondary { box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04); }

/* ── 表格 · 精修表头 + 行悬停 ── */
table thead th {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #9AA0AB;
  border-bottom: 1px solid #ECECEA;
}
table tbody tr:hover td { background: #FAFAF8; }

/* ── 标签/状态胶囊 · 统一圆角 ── */
.vs-stat-pill, .badge, .vs-tag, .vs-mr-pill { border-radius: 999px !important; }

/* ── Tab · 圆角细分隔 ── */
.vs-tab, .vsk-tab { border-radius: 8px 8px 0 0; padding: .6rem 1.15rem; }

/* ============================================================
   redesign-existing-projects · 去 AI 味实做 (2026-08-21)
   ① 字体换血 ② 等宽数字 ③ 按压反馈 ④ 着色阴影 ⑤ 破平噪点
   ============================================================ */
:root,[data-theme="dark"],[data-theme="light"]{
  --font: "Space Grotesk", -apple-system, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
body{font-family:var(--font)}
body .mono, body code, body pre, body .vs-stat-pill, body .vs-run-log-content,
body .vs-workshop-yaml, body .vst-yaml, body .vs-mr-preview, body .dash-card-value,
body .vsk-stat-value, body .stat-value, body .card .value{font-family:var(--font-mono)}

/* 数据等宽数字 */
body .card .value, body .dash-card-value, body .vsk-stat-value, body .stat-value,
body .mono, body td .badge{font-variant-numeric: tabular-nums}

/* 标题：更有分量、更紧 */
body h2, body .vs-page-header h2{letter-spacing:-.025em;font-weight:750}

/* 按钮：悬停 + 按压 */
body .btn, body button.btn{transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s}
body .btn:hover{transform:translateY(-1px)}
body .btn:active{transform:scale(.985) translateY(0)}

/* 着色阴影：带暖调/底色，而非纯黑 */
:root{--shadow-color:rgba(23,29,38,.12)}
body .card, body .vs-panel, body .vs-card, body .dash-card, body .dash-section,
body .vsk-stat-card, body .vs-mr-card, body .vs-step-card, body .vs-req-suite, body .vs-batch-card{
  box-shadow: 0 1px 1px rgba(23,29,38,.04), 0 8px 22px -14px var(--shadow-color)
}

/* 背景细微破平：极淡径向 + 噪点纹理 */
body .app-layout, body .content{
  background-image:
    radial-gradient(900px 500px at 85% -8%, rgba(35,131,226,.05), transparent 60%),
    radial-gradient(700px 420px at 0% 110%, rgba(120,140,180,.04), transparent 55%);
}

/* ============================================================
   high-end-visual-design · 高端工艺适配（后台工具版）2026-08-21
   取精华：双层嵌套卡 / 单一下沉accent / 弹簧缓动 / 眉标 / 克制留白。
   舍过度：不做营销页 py-24 大留白 / 深OLED / 滚动入场动效。
   ============================================================ */
:root,[data-theme="dark"],[data-theme="light"]{
  --font: "Plus Jakarta Sans", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --accent: #1E6FB8;              /* 单一、稍沉稳的蓝（比电蓝讨喜） */
  --accent-hover: #16599A;
  --line: #E7EAEF;                 /* 发丝，更柔 */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
}
body{font-family:var(--font)}

/* 眉标签：小节/面板标签走小号大写 + 紧字距 */
.vs-panel-label,.nav-group-label{letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:600;color:#5A6572}
.vs-panel-label{padding-left:12px;font-size:10.5px}

/* 双层嵌套卡：顶部内高光 + 发丝描边 + 着色柔影 + 顶部微渐层 */
.card,.stat-card,.vs-card,.dash-card,.dash-section,.vsk-stat-card,
.vs-step-card,.vs-req-suite,.vs-batch-card,.vs-case-item,.vs-panel,.vs-run-log-panel{
  border:1px solid rgba(22,40,90,.06);
  border-radius:14px;
  background:linear-gradient(180deg,#FFFFFF,#FDFDFB);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 1px 1px rgba(22,40,90,.04),
    0 12px 28px -18px rgba(22,40,90,.20);
}

/* 弹簧缓动：交互统一用高端曲线 */
.btn,button,.vs-tab,.vsk-tab,.nav-sub-item,.card,.vs-card,.dash-card,.vs-panel,.vs-row{transition-timing-function:var(--ease-spring);}

/* 统计「读数」：更大、更醒目、眉标上悬 */
.dash-card-value,.card .value,.vsk-stat-value,.stat-value{font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;color:#12233B}
.dash-card-label,.vsk-stat-label,.card .label{font-size:10.5px;letter-spacing:.05em;color:#7C8699}

/* 主区更从容的呼吸 */
.content,.wrap{padding-left:clamp(20px,3vw,34px);padding-right:clamp(20px,3vw,34px)}