/* ══ Local Fonts (offline first) ════════════════════════════ */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterLatin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("../assets/fonts/MaterialSymbolsOutlined.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ══ Design Tokens ══════════════════════════════════════════ */
:root {
  --primary:           #004B87;
  --primary-light:     #d3e4ff;
  --primary-hover:     #003a6a;
  --on-primary:        #ffffff;
  --surface:           #F2F5F8;
  --surface-container: #eeeeee;
  --surface-container-high: #e8e8e8;
  --surface-lowest:    #ffffff;
  --on-surface:        #1a1c1c;
  --on-surface-variant:#424750;
  --outline:           #727781;
  --outline-variant:   #c2c6d1;
  --inverse-surface:   #0C1B31;
  --inverse-on-surface:#e8eaed;
  --error:             #ba1a1a;
  --error-container:   #ffdad6;
  --success:           #006d2e;
  --success-light:     #4caf80;
  --warning:           #7c5800;
  --secondary:         #4d616f;
  --secondary-container:#d0e5f6;
  --radius-card:       12px;
  --shadow-card:       0 2px 12px rgba(0,0,0,0.05);

  /* Nav / Appbar */
  --nav-bg:            rgba(241, 245, 249, 0.92);
  --nav-text:          #94a3b8;
  --nav-text-active:   #0c4a6e;
  --nav-accent:        #0369a1;

  /* 全局 UI：Inter 负责拉丁字形气质，中文回退到更稳的系统字体 */
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-ui-zh: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC",
    "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;
  --font-ui-small: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei",
    "Inter", "Noto Sans SC", sans-serif;
  --font-title: "Inter", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei",
    "PingFang SC", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono",
    "SF Mono", Consolas, "Fira Code", "Microsoft YaHei UI", monospace;
}

/* ══ Reset ══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  background: var(--surface);
  color: var(--on-surface);
  overflow: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.startup-pending #app {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
}

body.startup-ready #app {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    filter 320ms ease;
}

body.desktop-shell .desktop-drag-region,
body.desktop-shell .appbar {
  -webkit-app-region: drag;
}

body.desktop-shell button,
body.desktop-shell input,
body.desktop-shell textarea,
body.desktop-shell select,
body.desktop-shell a,
body.desktop-shell .appbar-controls,
body.desktop-shell .appbar-controls *,
body.desktop-shell .appbar-nav,
body.desktop-shell .appbar-nav *,
body.desktop-shell .dialog-overlay,
body.desktop-shell .dialog-overlay *,
body.desktop-shell #main-area,
body.desktop-shell #main-area * {
  -webkit-app-region: no-drag;
}

/*
 * Electron 无框窗口：Chromium 的 -webkit-app-region: drag 在 Windows 上对触控笔/手指等
 * 经常无效；顶栏拖动改由 index.html 内 Pointer Events + IPC（见 beginDrag/moveDrag）。
 */
body.desktop-shell-electron .appbar {
  -webkit-app-region: no-drag;
}
body.desktop-shell-electron .desktop-drag-region {
  touch-action: none;
}

/* ══ App Shell ══════════════════════════════════════════════ */
#app {
  height: 100vh;
  display: grid;
  grid-template-rows: 40px 1fr 24px;
  overflow: hidden;
  background: var(--surface);
  position: relative;
  z-index: 1;
}

/* ══ Appbar (Top Navigation Bar) ════════════════════════════ */
.appbar {
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  display: flex;
  align-items: center;
  height: 40px;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}

.appbar-brand {
  display: flex;
  align-items: center;
  padding: 0 20px 0 20px;
  flex-shrink: 0;
  height: 100%;
}
.brand-name {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.04em;
}

/* Navigation Tabs */
.appbar-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0;
  padding-left: 12px;
}

/* 可拖动空白区 */
.appbar-drag {
  flex: 1;
  height: 100%;
  min-width: 40px;
}
.nav-tab {
  font-family: var(--font-ui-small);
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--nav-text);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.2s;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.nav-tab:hover {
  color: #475569;
}
.nav-tab.active {
  color: var(--nav-text-active);
  border-bottom-color: var(--nav-accent);
  font-weight: 700;
}

/* Window Controls */
.appbar-controls {
  display: flex;
  align-items: stretch;
  height: 40px;
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
}
.tbtn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #64748b;
  transition: background 0.15s, color 0.15s;
  font-size: 0;
}
.tbtn .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: "wght" 300;
}
.tbtn:hover { background: rgba(148, 163, 184, 0.18); color: #334155; }
/* 系统菜单入口（许可证 + 更新）：与窗口控制列对齐 */
.tbtn-tools {
  margin-right: 4px;
}
.tbtn-tools .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: "wght" 300;
  color: var(--primary);
  opacity: 0.9;
}
.tbtn-tools:hover .material-symbols-outlined {
  opacity: 1;
}
.tbtn-tools.is-open {
  background: rgba(148, 163, 184, 0.24);
  color: #334155;
}
.tbtn-tools.is-open .material-symbols-outlined {
  opacity: 1;
}
.app-tools-dropdown {
  right: 124px;
  width: 180px;
  top: 38px;
  border-radius: 12px;
  transform-origin: calc(100% - 18px) top;
  transform: translateY(-6px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 180ms ease;
}
.app-tools-dropdown.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.tbtn-close:hover { background: #e81123; color: #fff; }
.tbtn-close { border-radius: 0; }
.proj-active-label {
  font-family: var(--font-ui-small);
  align-self: center;
  height: 22px;
  line-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  margin-right: 4px;
  background: rgba(0, 75, 135, 0.10);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-dropdown {
  position: absolute;
  right: 132px;
  top: 42px;
  width: 240px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  z-index: 50;
}
.proj-dd-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--on-surface);
  font: inherit;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.proj-dd-item:hover {
  background: var(--surface);
}
.proj-dd-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.proj-dd-sep {
  height: 1px;
  background: var(--outline-variant);
  margin: 6px 4px;
}
/* ══ Project Wizard ════════════════════════════════════════ */
.proj-wizard-card {
  width: min(880px, 96vw);
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: 90vh;
}
/* .dialog-card 在全局里晚于本段定义，会覆盖 padding；强制向导卡片无外边距内缩 */
.dialog-card.proj-wizard-card {
  padding: 0;
}

/* Header */
.proj-wizard-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px 12px;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}
.proj-wizard-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}

/* Step Indicator */
.proj-step-indicator {
  display: flex;
  align-items: flex-start;
  padding: 12px 28px 12px;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
  background: var(--surface);
}
.proj-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.proj-step-connector {
  flex: 1;
  height: 2px;
  background: var(--outline-variant);
  margin-top: 13px;
  min-width: 12px;
  transition: background 0.25s;
}
.proj-step-connector.done {
  background: var(--primary);
}
.proj-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--outline-variant);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--outline);
  background: var(--surface-lowest);
  position: relative;
  z-index: 1;
  transition: all 0.2s;
}
.proj-step-circle .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: "wght" 600;
}
.proj-step-item.active .proj-step-circle {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(0,75,135,0.10);
}
.proj-step-item.done .proj-step-circle {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.proj-step-label {
  font-size: 11px;
  color: var(--outline);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.proj-step-item.active .proj-step-label {
  color: var(--primary);
  font-weight: 700;
}
.proj-step-item.done .proj-step-label {
  color: var(--on-surface-variant);
  font-weight: 600;
}

/* 许可证管理：与项目向导同壳，步骤条位置改为说明条 */
.proj-lic-subbar {
  padding: 10px 28px 12px;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
  background: var(--surface);
  font-size: 12px;
  line-height: 1.65;
  color: var(--on-surface-variant);
}
.proj-lic-subbar .lic-mono {
  font-family: var(--font-mono);
  font-size: 12px;
}
.dialog-card.proj-wizard-card.lic-wizard-card {
  width: min(720px, 96vw);
}

/* Body & Section */
.proj-wizard-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.proj-wizard-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

/* 步骤切换不添加过渡动画，避免在 overflow 滚动区内因 opacity/transform 变化引起控件二次排布抖动 */

/* 步骤圆圈激活弹跳 */
@keyframes proj-step-pop {
  0%   { transform: scale(0.7); opacity: 0.4; }
  65%  { transform: scale(1.12); }
  100% { transform: scale(1);   opacity: 1; }
}
.proj-step-item.active .proj-step-circle {
  animation: proj-step-pop 0.28s cubic-bezier(0.2, 0, 0, 1);
}
.proj-wz-body {
  padding: 20px 22px;
}

/* 项目向导：必填项红色星号 */
.proj-req-mark {
  display: inline;
  margin-left: 4px;
  color: var(--error);
  font-weight: 700;
  font-size: 1.1em;
  line-height: 0;
  vertical-align: middle;
}
.field-label .proj-req-mark {
  margin-left: 5px;
}
.cfg-id-label .proj-req-mark {
  margin-left: 3px;
}
[data-theme="dark"] .proj-req-mark {
  color: color-mix(in srgb, var(--error) 92%, #fff);
}

/* 项目向导：协议与填充 — 寻址/CAN 下拉闭合态与 cfg-id-row（填充字节）一致；展开列表仍为 ff-field-dd */
.proj-cfg-dd-row .proj-dd-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.field .ff-field-dd-wrap.proj-field-dd-wrap--boxed,
.proj-wz-hw-layout .ff-field-dd-wrap.proj-field-dd-wrap--boxed {
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.field .ff-field-dd-wrap.proj-field-dd-wrap--boxed:has(.ff-field-dd.open),
.proj-wz-hw-layout .ff-field-dd-wrap.proj-field-dd-wrap--boxed:has(.ff-field-dd.open) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.field .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd .custom-select-trigger,
.proj-wz-hw-layout .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd .custom-select-trigger {
  border: none !important;
  border-radius: 0;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 32px;
  min-height: 32px;
  padding: 0 2px 0 6px;
  font-weight: 500;
  font-size: 13px;
}
.field .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd .custom-select-trigger:hover,
.proj-wz-hw-layout .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd .custom-select-trigger:hover {
  background: transparent !important;
  box-shadow: none !important;
}
.field .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd.open .custom-select-trigger,
.proj-wz-hw-layout .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd.open .custom-select-trigger {
  background: transparent !important;
  box-shadow: none !important;
}
.field .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd-label,
.proj-wz-hw-layout .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd-label {
  text-align: right;
}
[data-theme="dark"] .field .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd .custom-select-trigger:hover,
[data-theme="dark"] .field .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd.open .custom-select-trigger,
[data-theme="dark"] .proj-wz-hw-layout .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd .custom-select-trigger:hover,
[data-theme="dark"] .proj-wz-hw-layout .ff-field-dd-wrap.proj-field-dd-wrap--boxed .ff-field-dd.open .custom-select-trigger {
  background: transparent !important;
  box-shadow: none !important;
}

/* 项目向导 · 硬件步骤：双列同高标题 + cfg-id-list */
.proj-wz-hw-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
  align-items: start;
}
.proj-wz-hw-layout > .cfg-col {
  gap: 16px;
}
/* 硬件向导：左右列「区块标题 + 行标签」统一色值与字重，避免一侧像 cfg-section-label、一侧像浅灰 cfg-id-label */
.proj-wz-hw-layout .cfg-section-label,
.proj-wz-hw-layout .cfg-id-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
  letter-spacing: 0.01em;
}
.proj-wz-hw-layout .cfg-id-label {
  text-transform: none;
}
.proj-wz-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--outline-variant);
}
.proj-wz-section-head > .material-symbols-outlined {
  font-size: 22px;
  color: var(--primary);
  margin-top: 1px;
  flex-shrink: 0;
}
.proj-wz-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.proj-wz-section-desc {
  font-size: 12px;
  color: var(--on-surface-variant);
  margin-top: 4px;
  line-height: 1.5;
}
.proj-wz-divider {
  height: 1px;
  background: var(--outline-variant);
  margin: 4px 0;
}

/* Footer */
.proj-wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--outline-variant);
  background: var(--surface);
  border-radius: 0 0 14px 14px;
  flex-shrink: 0;
}

/* Service Library Tabs */
.proj-svc-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: 0;
}
.proj-svc-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 13px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  font-family: inherit;
}
.proj-svc-tab .material-symbols-outlined { font-size: 15px; }
.proj-svc-tab:hover {
  color: var(--on-surface);
  background: rgba(0,0,0,0.025);
}
.proj-svc-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
  background: transparent;
}
.proj-svc-count {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
}
.proj-svc-panel {
  margin-top: 0;
  border: 1px solid var(--outline-variant);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.proj-svc-table {
  margin: 0;
}
.proj-svc-table td input {
  height: 34px;
  font-size: 12.5px;
}
.proj-svc-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--outline);
  font-size: 13px;
  border: 1px dashed var(--outline-variant);
  border-radius: 8px;
  background: var(--surface);
}
.proj-svc-empty .material-symbols-outlined { font-size: 20px; }

/* Security Levels */
.proj-sec-levels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.proj-sec-level-btn {
  width: 54px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--outline-variant);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--font-mono);
  position: relative;
}
.proj-sec-level-letter {
  font-size: 9px;
  font-weight: 700;
  color: var(--outline);
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}
.proj-sec-level-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--on-surface-variant);
  line-height: 1.1;
}
.proj-sec-level-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.proj-sec-level-btn:hover .proj-sec-level-letter,
.proj-sec-level-btn:hover .proj-sec-level-num {
  color: var(--primary);
}
.proj-sec-level-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 3px 8px rgba(0,75,135,0.28);
}
.proj-sec-level-btn.active .proj-sec-level-letter,
.proj-sec-level-btn.active .proj-sec-level-num {
  color: #fff;
}
.proj-sec-levels-hint {
  font-size: 12.5px;
  color: var(--on-surface-variant);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.proj-sec-level-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Udsflow linked state */
.proj-flow-linked {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--success);
  font-weight: 600;
}
.proj-flow-linked .material-symbols-outlined { font-size: 16px; }
.proj-flow-unlinked {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--outline);
}
.proj-flow-unlinked .material-symbols-outlined { font-size: 15px; }

/* Summary (step 6) */
.proj-wz-summary {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.proj-wz-summary-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--outline-variant);
}
.proj-wz-summary-row:last-child { border-bottom: none; }
.proj-wz-summary-key {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  width: 90px;
  flex-shrink: 0;
}
.proj-wz-summary-val {
  font-size: 13px;
  color: var(--on-surface);
  font-weight: 500;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.proj-wz-summary-val code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-surface);
  background: var(--surface-container);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Preflight */
.proj-preflight-wrap { margin-top: 4px; }
.proj-preflight-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.proj-preflight-label .material-symbols-outlined {
  font-size: 15px;
  color: var(--primary);
}
.proj-preflight-placeholder {
  font-size: 12px;
  color: var(--outline);
  padding: 11px 14px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px dashed var(--outline-variant);
  line-height: 1.5;
}
.proj-preflight-result {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.proj-preflight-result .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.proj-preflight-result.ok {
  background: rgba(0,109,46,0.06);
  border: 1px solid rgba(0,109,46,0.2);
  color: var(--success);
}
.proj-preflight-result.fail {
  background: rgba(186,26,26,0.05);
  border: 1px solid rgba(186,26,26,0.2);
  color: var(--error);
}

/* DLL+等级绑定表格 */
.proj-dll-table-wrap {
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0;
}
.proj-dll-table {
  margin: 0;
}
.proj-dll-level-cell {
  width: 80px;
  vertical-align: middle;
}
.proj-dll-level-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 6px;
  font-size: 12.5px;
  font-family: inherit;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  background: var(--surface-lowest);
  color: var(--on-surface);
  box-sizing: border-box;
  text-align: center;
}
.proj-dll-level-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* 安全向导：路径 + 选文件 + 删除；列距收紧，两图标按钮更靠拢 */
.proj-dll-file-row {
  column-gap: 6px !important;
  row-gap: 8px !important;
  grid-template-columns: 1fr auto auto !important;
}
.proj-dll-table td {
  vertical-align: middle;
  padding: 6px 8px;
}
.proj-dll-table td input {
  height: 34px;
  font-size: 12.5px;
}

/* code 在 info-note 和 section-desc 中的样式 */
.info-note code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 75, 135, 0.12);
}
.proj-wz-section-desc code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--on-surface-variant);
}

/* Legacy (keep for backward compat, unused) */
.proj-step-dot { display: none; }
.proj-table { display: none; }

/* ══ Status Bar（中英混排：YaHei UI 拉丁与汉字同套，避免 Segoe 英文“撑满”栏高） ══ */
.statusbar {
  --status-font: var(--font-ui-small);
  background: #0a1525;
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  min-height: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 24px;
  font-family: var(--status-font);
  -webkit-font-smoothing: antialiased;
}
.sb-left, .sb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-family: inherit;
  white-space: nowrap;
}
.sb-right {
  font-size: 11px;
  opacity: 0.78;
  letter-spacing: 0.04em;
}
.sb-inline-icon {
  font-size: 12px !important;
  font-variation-settings: "wght" 400;
  opacity: 0.72;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* 登录卡片底栏：与主窗口状态栏同一套混排字体与行高策略 */
.login-header {
  background: linear-gradient(160deg, #f6f9fd 0%, #edf2f8 100%);
}

/* 登录页品牌标：与 SVG 同色底避免抗锯齿露白，外圈用深蓝阴影微发光（勿用浅色描边） */
.login-brand-mark {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: #004b87;
  line-height: 0;
  flex-shrink: 0;
  overflow: visible;
  box-shadow:
    0 8px 26px rgba(0, 75, 135, 0.45),
    0 3px 10px rgba(0, 40, 80, 0.22);
}
.login-brand-mark svg {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 16px;
}
.login-card-footer {
  --status-font: var(--font-ui-small);
  height: 28px;
  min-height: 28px;
  background: var(--inverse-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 28px;
  font-family: var(--status-font);
  color: rgba(255, 255, 255, 0.6);
  -webkit-font-smoothing: antialiased;
  border-radius: 0 0 14px 14px;
}
.login-card-footer .login-sb-left,
.login-card-footer .login-sb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-family: inherit;
  white-space: nowrap;
}
.login-card-footer .login-sb-right {
  font-size: 11px;
  opacity: 0.78;
  letter-spacing: 0.04em;
}
.login-card-footer .login-sb-icon {
  font-size: 12px !important;
  font-variation-settings: "wght" 400;
  opacity: 0.72;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.login-card-footer .status-dot {
  width: 5px;
  height: 5px;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.status-dot.connected    { background: var(--success-light); box-shadow: 0 0 5px rgba(76,175,128,0.7); }
.status-dot.disconnected {
  background: #F5A623;
  animation: dot-breathe 2s ease-in-out infinite;
}

@keyframes dot-breathe {
  0%, 100% { opacity: 1;   box-shadow: 0 0 5px 2px rgba(245,166,35,0.55); }
  50%       { opacity: 0.4; box-shadow: 0 0 2px 0px rgba(245,166,35,0.1);  }
}

/* ══ Main Area (fills between appbar and statusbar) ══════════ */
#main-area {
  background: var(--surface);
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ══ Sub Navigation (Module Tabs inside Workspace) ══════════ */
.subnav {
  display: flex;
  align-items: center;
  height: 44px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 0 20px;
  gap: 0;
  flex-shrink: 0;
  overflow-x: auto;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav-btn {
  font-family: var(--font-ui-small);
  height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface-variant);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  letter-spacing: 0.005em;
  border-radius: 0;
}
.subnav-btn .material-symbols-outlined { font-size: 15px; }
.subnav-btn:hover {
  color: var(--on-surface);
  background: rgba(0,0,0,0.025);
}
.subnav-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.subnav-spacer { flex: 1; }
.subnav-settings-btn {
  font-family: var(--font-ui-small);
  height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--on-surface-variant);
  background: transparent;
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.subnav-settings-btn .material-symbols-outlined { font-size: 14px; }
.subnav-settings-btn:hover { color: var(--primary); border-color: var(--primary); }

.subnav-disconnect-btn {
  padding: 0 10px;
}

/* ══ Content ══════════════════════════════════════════════════ */
.content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  background: var(--surface);
  font-family: var(--font-ui);
}

/* ══ Cards ══════════════════════════════════════════════════ */
.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.card-header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.card-header h2 {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.2;
}
.card-header p {
  font-size: 13px;
  color: var(--on-surface-variant);
  margin-top: 4px;
  line-height: 1.4;
}

/* ══ Grids ══════════════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ══ Section Title ══════════════════════════════════════════ */
.section-title {
  font-family: var(--font-ui-small);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--on-surface) 78%, var(--on-surface-variant));
  margin-bottom: 14px;
  letter-spacing: 0;
}
.section-title .material-symbols-outlined {
  font-size: 17px;
  color: var(--primary);
  flex-shrink: 0;
}

/* ══ Form ══════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  font-family: var(--font-ui-small);
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

input, select, textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--surface-lowest);
  color: var(--on-surface);
  border: none;
  border-bottom: 2px solid var(--outline-variant);
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-bottom-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,75,135,0.07);
  background: #fff;
}
input::placeholder { color: rgba(114,119,129,0.4); font-size: 13px; }

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ui-number {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.ui-number > input[type="number"] {
  padding-right: 28px;
}
.ui-number--compact {
  width: 74px;
}
.ui-number--dense > input[type="number"] {
  padding-right: 22px;
}
.ui-number--center > input[type="number"] {
  text-align: center;
}
.ui-number-steppers {
  position: absolute;
  top: 6px;
  right: 3px;
  bottom: 6px;
  width: 18px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  opacity: 0;
  transform: translateX(2px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.ui-number-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: color-mix(in srgb, var(--primary) 52%, var(--on-surface-variant));
  cursor: pointer;
  transition: transform 0.14s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
  opacity: 0.84;
  box-shadow: none;
}
.ui-number-stepper:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
}
.ui-number-stepper:active:not(:disabled) {
  transform: translateY(1px);
}
.ui-number-stepper:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.ui-number-stepper:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  box-shadow: none;
}
.ui-number-stepper .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: "wght" 260;
}
.ui-number--dense .ui-number-steppers {
  top: 5px;
  right: 2px;
  bottom: 5px;
  width: 16px;
  gap: 0;
}
.ui-number--dense .ui-number-stepper {
  border-radius: 4px;
}
.ui-number--dense .ui-number-stepper .material-symbols-outlined {
  font-size: 12px;
}
.ui-number:focus-within > input[type="number"] {
  border-bottom-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,75,135,0.07);
  background: #fff;
}
.ui-number:focus-within .ui-number-steppers {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.ui-number:focus-within .ui-number-stepper {
  color: color-mix(in srgb, var(--primary) 78%, var(--on-surface));
}

.proj-dll-level-cell .ui-number,
.sec-level-stepper .ui-number {
  width: 100%;
}

.proj-dll-level-cell .ui-number-steppers,
.sec-level-stepper .ui-number-steppers {
  top: 4px;
  right: 4px;
  bottom: 4px;
}

[data-theme="dark"] .ui-number-stepper {
  background: transparent;
  color: color-mix(in srgb, #c8dbf7 62%, var(--primary-light));
  box-shadow: none;
}
[data-theme="dark"] .ui-number-stepper:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: #fff;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23727781'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  padding-right: 32px;
  cursor: default;
  font-weight: 500;
}

/* ══ Custom Select Dropdown ═══════════════════════════════ */
.custom-select {
  position: relative;
}
.custom-select-trigger {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--surface-lowest);
  color: var(--on-surface);
  border: none;
  border-bottom: 2px solid var(--outline-variant);
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  user-select: none;
}
.custom-select-trigger:hover {
  background: #fff;
}
.custom-select.open .custom-select-trigger {
  border-bottom-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,75,135,0.07);
  background: #fff;
}
.custom-select.open .custom-select-trigger .material-symbols-outlined {
  transform: rotate(180deg);
}
.custom-select-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  z-index: 100;
  padding: 6px;
  animation: selectFadeIn 0.15s ease-out;
}
.custom-select.open .custom-select-options {
  display: block;
}
@keyframes selectFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.custom-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.12s;
  color: var(--on-surface);
}
.custom-select-option:hover {
  background: var(--surface);
}
.custom-select-option:focus {
  outline: none;
}
.custom-select-option:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(0, 75, 135, 0.3);
}
.custom-select-option.selected {
  background: var(--primary-light);
}
.custom-select-option.selected .material-symbols-outlined {
  color: var(--primary);
}
.custom-select-option .material-symbols-outlined {
  color: var(--on-surface-variant);
  flex-shrink: 0;
}

.native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ui-select {
  position: relative;
  width: 100%;
}

.ui-select .custom-select-trigger {
  position: relative;
  justify-content: flex-start;
  padding-right: 34px;
}

.ui-select .custom-select-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 6px;
}

.ui-select .custom-select-trigger > .material-symbols-outlined {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--on-surface-variant);
  pointer-events: none;
}

.ui-select.open .custom-select-trigger > .material-symbols-outlined {
  transform: translateY(-50%) rotate(180deg);
}

.ui-select .custom-select-options {
  max-height: min(320px, 42vh);
  overflow-y: auto;
}

.ui-select .custom-select-options::-webkit-scrollbar {
  width: 6px;
}

.ui-select .custom-select-options::-webkit-scrollbar-thumb {
  background: rgba(114, 119, 129, 0.28);
  border-radius: 999px;
}

.custom-select-option--simple {
  min-height: 38px;
  padding: 8px 12px;
  gap: 0;
  justify-content: flex-start;
  font-family: var(--font-ui-small);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  background: transparent;
  color: var(--on-surface);
}

.custom-select-option--simple:hover {
  background: rgba(0, 75, 135, 0.045);
}

.custom-select-option--simple.selected {
  background: rgba(211, 228, 255, 0.9);
  color: var(--primary);
  font-weight: 600;
}

.custom-select-option--simple.selected::before {
  content: "";
  width: 3px;
  height: 18px;
  align-self: center;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--primary);
  flex-shrink: 0;
}

.custom-select-option--simple:not(.selected) {
  padding-left: 15px;
}

.custom-select-option--simple .custom-select-option__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-option--detailed {
  align-items: flex-start;
  padding: 10px 12px;
}

.custom-select-option--detailed .custom-select-option__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-select-option--detailed .custom-select-option__title {
  font-family: var(--font-ui-small);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface);
}

/* ══ Shared Thin Scrollbar ═════════════════════════════════ */
:root {
  --scrollbar-size: 6px;
  --scrollbar-thumb: rgba(92, 107, 128, 0.34);
  --scrollbar-thumb-hover: rgba(0, 75, 135, 0.46);
  --scrollbar-track: transparent;
}

.proj-wizard-body,
.content,
.log-panel,
.custom-select-options,
.ui-select .custom-select-options,
.ff-field-dd-options,
.cfg-dropdown-list,
.proj-preset-list,
.ff-preset-list,
.dialog-scroll,
.ff-steps-list,
.ff-cw-step,
.ff-rich-input,
.proj-dropdown,
.ff-macro-list,
.of-macro-list,
.ff-file-macro-list {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
}

.ff-macro-list::-webkit-scrollbar,
.of-macro-list::-webkit-scrollbar,
.ff-file-macro-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Ensure scrollbar CSS variables are defined on :root (for thin scrollbar styling) */
:root {
  --scrollbar-size: 6px;
  --scrollbar-thumb: rgba(92, 107, 128, 0.34);
  --scrollbar-thumb-hover: rgba(0, 75, 135, 0.46);
  --scrollbar-track: transparent;
}

.proj-wizard-body::-webkit-scrollbar,
.content::-webkit-scrollbar,
.log-panel::-webkit-scrollbar,
.custom-select-options::-webkit-scrollbar,
.ui-select .custom-select-options::-webkit-scrollbar,
.ff-field-dd-options::-webkit-scrollbar,
.cfg-dropdown-list::-webkit-scrollbar,
.proj-preset-list::-webkit-scrollbar,
.ff-preset-list::-webkit-scrollbar,
.dialog-scroll::-webkit-scrollbar,
.ff-steps-list::-webkit-scrollbar,
.ff-cw-step::-webkit-scrollbar,
.ff-rich-input::-webkit-scrollbar,
.proj-dropdown::-webkit-scrollbar,
.ff-macro-list::-webkit-scrollbar,
.of-macro-list::-webkit-scrollbar,
.ff-file-macro-list::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.proj-wizard-body::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.log-panel::-webkit-scrollbar-track,
.custom-select-options::-webkit-scrollbar-track,
.ui-select .custom-select-options::-webkit-scrollbar-track,
.ff-field-dd-options::-webkit-scrollbar-track,
.cfg-dropdown-list::-webkit-scrollbar-track,
.proj-preset-list::-webkit-scrollbar-track,
.ff-preset-list::-webkit-scrollbar-track,
.dialog-scroll::-webkit-scrollbar-track,
.ff-steps-list::-webkit-scrollbar-track,
.ff-cw-step::-webkit-scrollbar-track,
.ff-rich-input::-webkit-scrollbar-track,
.proj-dropdown::-webkit-scrollbar-track,
.ff-macro-list::-webkit-scrollbar-track,
.of-macro-list::-webkit-scrollbar-track,
.ff-file-macro-list::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.proj-wizard-body::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.log-panel::-webkit-scrollbar-thumb,
.custom-select-options::-webkit-scrollbar-thumb,
.ui-select .custom-select-options::-webkit-scrollbar-thumb,
.ff-field-dd-options::-webkit-scrollbar-thumb,
.cfg-dropdown-list::-webkit-scrollbar-thumb,
.proj-preset-list::-webkit-scrollbar-thumb,
.ff-preset-list::-webkit-scrollbar-thumb,
.dialog-scroll::-webkit-scrollbar-thumb,
.ff-steps-list::-webkit-scrollbar-thumb,
.ff-cw-step::-webkit-scrollbar-thumb,
.ff-rich-input::-webkit-scrollbar-thumb,
.proj-dropdown::-webkit-scrollbar-thumb,
.ff-macro-list::-webkit-scrollbar-thumb,
.of-macro-list::-webkit-scrollbar-thumb,
.ff-file-macro-list::-webkit-scrollbar-thumb {
  background-color: rgba(92, 107, 128, 0);
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  transition: background-color 180ms ease, opacity 180ms ease, border-color 180ms ease;
  opacity: 0;
}

.proj-wizard-body.scroll-active,
.content.scroll-active,
.log-panel:hover,
.log-panel:focus-within,
.log-panel.scroll-active,
.custom-select-options:hover,
.custom-select-options:focus-within,
.custom-select-options.scroll-active,
.ui-select .custom-select-options:hover,
.ui-select .custom-select-options:focus-within,
.ui-select .custom-select-options.scroll-active,
.ff-field-dd-options:hover,
.ff-field-dd-options:focus-within,
.ff-field-dd-options.scroll-active,
.cfg-dropdown-list:hover,
.cfg-dropdown-list:focus-within,
.cfg-dropdown-list.scroll-active,
.proj-preset-list:hover,
.proj-preset-list:focus-within,
.proj-preset-list.scroll-active,
.ff-preset-list:hover,
.ff-preset-list:focus-within,
.ff-preset-list.scroll-active,
.dialog-scroll:hover,
.dialog-scroll:focus-within,
.dialog-scroll.scroll-active,
.ff-steps-list:hover,
.ff-steps-list:focus-within,
.ff-steps-list.scroll-active,
.ff-cw-step.scroll-active,
.ff-rich-input:hover,
.ff-rich-input:focus-within,
.ff-rich-input.scroll-active,
.proj-dropdown:hover,
.proj-dropdown:focus-within,
.proj-dropdown.scroll-active,
.ff-macro-list.scroll-active,
.of-macro-list.scroll-active,
.ff-file-macro-list.scroll-active {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.proj-wizard-body.scroll-active::-webkit-scrollbar-thumb,
.content.scroll-active::-webkit-scrollbar-thumb,
.log-panel:hover::-webkit-scrollbar-thumb,
.log-panel:focus-within::-webkit-scrollbar-thumb,
.log-panel.scroll-active::-webkit-scrollbar-thumb,
.custom-select-options:hover::-webkit-scrollbar-thumb,
.custom-select-options:focus-within::-webkit-scrollbar-thumb,
.custom-select-options.scroll-active::-webkit-scrollbar-thumb,
.ui-select .custom-select-options:hover::-webkit-scrollbar-thumb,
.ui-select .custom-select-options:focus-within::-webkit-scrollbar-thumb,
.ui-select .custom-select-options.scroll-active::-webkit-scrollbar-thumb,
.ff-field-dd-options:hover::-webkit-scrollbar-thumb,
.ff-field-dd-options:focus-within::-webkit-scrollbar-thumb,
.ff-field-dd-options.scroll-active::-webkit-scrollbar-thumb,
.cfg-dropdown-list:hover::-webkit-scrollbar-thumb,
.cfg-dropdown-list:focus-within::-webkit-scrollbar-thumb,
.cfg-dropdown-list.scroll-active::-webkit-scrollbar-thumb,
.proj-preset-list:hover::-webkit-scrollbar-thumb,
.proj-preset-list:focus-within::-webkit-scrollbar-thumb,
.proj-preset-list.scroll-active::-webkit-scrollbar-thumb,
.ff-preset-list:hover::-webkit-scrollbar-thumb,
.ff-preset-list:focus-within::-webkit-scrollbar-thumb,
.ff-preset-list.scroll-active::-webkit-scrollbar-thumb,
.dialog-scroll:hover::-webkit-scrollbar-thumb,
.dialog-scroll:focus-within::-webkit-scrollbar-thumb,
.dialog-scroll.scroll-active::-webkit-scrollbar-thumb,
.ff-steps-list:hover::-webkit-scrollbar-thumb,
.ff-steps-list:focus-within::-webkit-scrollbar-thumb,
.ff-steps-list.scroll-active::-webkit-scrollbar-thumb,
.ff-cw-step.scroll-active::-webkit-scrollbar-thumb,
.ff-rich-input:hover::-webkit-scrollbar-thumb,
.ff-rich-input:focus-within::-webkit-scrollbar-thumb,
.ff-rich-input.scroll-active::-webkit-scrollbar-thumb,
.proj-dropdown:hover::-webkit-scrollbar-thumb,
.proj-dropdown:focus-within::-webkit-scrollbar-thumb,
.proj-dropdown.scroll-active::-webkit-scrollbar-thumb,
.ff-macro-list.scroll-active::-webkit-scrollbar-thumb,
.of-macro-list.scroll-active::-webkit-scrollbar-thumb,
.ff-file-macro-list.scroll-active::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  opacity: 1;
}

.proj-wizard-body.scroll-active::-webkit-scrollbar-thumb:hover,
.content.scroll-active::-webkit-scrollbar-thumb:hover,
.log-panel:hover::-webkit-scrollbar-thumb:hover,
.log-panel.scroll-active::-webkit-scrollbar-thumb:hover,
.custom-select-options:hover::-webkit-scrollbar-thumb:hover,
.custom-select-options.scroll-active::-webkit-scrollbar-thumb:hover,
.ui-select .custom-select-options:hover::-webkit-scrollbar-thumb:hover,
.ui-select .custom-select-options.scroll-active::-webkit-scrollbar-thumb:hover,
.ff-field-dd-options:hover::-webkit-scrollbar-thumb:hover,
.ff-field-dd-options.scroll-active::-webkit-scrollbar-thumb:hover,
.cfg-dropdown-list:hover::-webkit-scrollbar-thumb:hover,
.cfg-dropdown-list.scroll-active::-webkit-scrollbar-thumb:hover,
.proj-preset-list:hover::-webkit-scrollbar-thumb:hover,
.proj-preset-list.scroll-active::-webkit-scrollbar-thumb:hover,
.ff-preset-list:hover::-webkit-scrollbar-thumb:hover,
.ff-preset-list.scroll-active::-webkit-scrollbar-thumb:hover,
.dialog-scroll:hover::-webkit-scrollbar-thumb:hover,
.dialog-scroll.scroll-active::-webkit-scrollbar-thumb:hover,
.ff-steps-list:hover::-webkit-scrollbar-thumb:hover,
.ff-steps-list.scroll-active::-webkit-scrollbar-thumb:hover,
.ff-cw-step.scroll-active::-webkit-scrollbar-thumb:hover,
.ff-rich-input:hover::-webkit-scrollbar-thumb:hover,
.ff-rich-input.scroll-active::-webkit-scrollbar-thumb:hover,
.proj-dropdown:hover::-webkit-scrollbar-thumb:hover,
.proj-dropdown.scroll-active::-webkit-scrollbar-thumb:hover,
.ff-macro-list.scroll-active::-webkit-scrollbar-thumb:hover,
.of-macro-list.scroll-active::-webkit-scrollbar-thumb:hover,
.ff-file-macro-list.scroll-active::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
  opacity: 1;
}

.custom-select-option--detailed .custom-select-option__sub {
  font-family: var(--font-ui-zh);
  font-size: 11px;
  line-height: 1.45;
  color: var(--on-surface-variant);
}

textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--outline-variant);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

/* ══ Config Page ═════════════════════════════════════════════ */
.cfg-page {
  position: relative;
  z-index: 1;
}
.cfg-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 820px;
  border-radius: 12px;
  border: 1px solid rgba(114,119,129,0.15);
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.cfg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}
.cfg-header,
.cfg-body,
.cfg-progress,
.cfg-footer {
  position: relative;
  z-index: 1;
}
.cfg-header {
  padding: 24px 28px 16px;
}
.cfg-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}
.cfg-subtitle {
  font-size: 13px;
  color: var(--secondary);
  margin-top: 4px;
}
.cfg-mono-inline {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
}
.cfg-card.cfg-init-dnd-hover {
  outline: 2px dashed var(--primary);
  outline-offset: 3px;
}
.cfg-body {
  padding: 8px 28px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 36px;
}
.cfg-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cfg-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cfg-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
}

/* Config Dropdown (custom) */
.cfg-dropdown {
  position: relative;
}
.cfg-dropdown-trigger {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 12px;
  background: var(--surface-lowest);
  color: var(--on-surface);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  cursor: pointer;
  transition: box-shadow 0.2s;
  display: flex;
  align-items: center;
  user-select: none;
  position: relative;
}
.cfg-dropdown-trigger:hover {
  box-shadow: inset 0 0 0 1px var(--outline);
}
.cfg-dropdown.open .cfg-dropdown-trigger {
  box-shadow: inset 0 0 0 2px var(--primary);
}
.cfg-dropdown-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--outline);
  display: flex;
  transition: transform 0.2s;
}
.cfg-dropdown.open .cfg-dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
}
.cfg-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  z-index: 100;
  padding: 4px;
  animation: cfgDropIn 0.15s ease-out;
}
.cfg-dropdown.open .cfg-dropdown-list {
  display: block;
}
.cfg-dropdown--center .cfg-dropdown-trigger {
  justify-content: center;
  padding-left: 36px;
  padding-right: 36px;
}
.cfg-dropdown--center .cfg-dropdown-text {
  flex: 1;
  text-align: center;
}

/* 硬件向导：帧长度嵌在 cfg-id-row 内，触发器透明、无 inset 线，避免与外行叠成「幽灵白框」 */
.proj-wz-hw-layout .proj-cfg-dd-row .proj-dd-slot .cfg-dropdown {
  flex: 1;
  min-width: 0;
}
.proj-wz-hw-layout .proj-cfg-dd-row .proj-dd-slot .cfg-dropdown--center .cfg-dropdown-trigger {
  height: 32px;
  min-height: 32px;
  padding: 0 28px 0 8px;
  font-size: 13px;
  font-weight: 500;
  justify-content: flex-end;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.proj-wz-hw-layout .proj-cfg-dd-row .proj-dd-slot .cfg-dropdown--center .cfg-dropdown-trigger:hover {
  box-shadow: none !important;
}
.proj-wz-hw-layout .proj-cfg-dd-row .proj-dd-slot .cfg-dropdown.open .cfg-dropdown-trigger {
  box-shadow: none !important;
}
.proj-wz-hw-layout .proj-cfg-dd-row .proj-dd-slot .cfg-dropdown--center .cfg-dropdown-text {
  flex: 0 1 auto;
  text-align: right;
}
.proj-wz-hw-layout .proj-cfg-dd-row .proj-dd-slot .cfg-dropdown-arrow {
  right: 4px;
}
[data-theme="dark"] .proj-wz-hw-layout .proj-cfg-dd-row .proj-dd-slot .cfg-dropdown--center .cfg-dropdown-trigger {
  background: transparent !important;
  box-shadow: none !important;
}

@keyframes cfgDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cfg-dropdown-item {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.cfg-dropdown-item:hover {
  background: var(--surface);
}
.cfg-dropdown-item.selected {
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 600;
}

/* cfg-dropdown 带副标题变体（在向导和加密向导中使用） */
.cfg-dropdown-item--sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 12px;
}
.cfg-dropdown-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1.2;
}
.cfg-dropdown-item-sub {
  font-size: 10.5px;
  color: var(--on-surface-variant);
  line-height: 1.3;
}
.cfg-dropdown-item--sub.selected .cfg-dropdown-item-title {
  color: var(--primary);
}
.cfg-dropdown-item--sub.selected .cfg-dropdown-item-sub {
  color: var(--primary);
  opacity: 0.75;
}

/* Config Radio Card */
.cfg-radio-card {
  background: var(--surface);
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid rgba(114,119,129,0.15);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cfg-radio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cfg-radio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
  transition: color 0.15s;
}
.cfg-radio-item:hover {
  color: var(--on-surface);
}
.cfg-radio-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  margin: 0;
}

/* Config ID rows */
.cfg-id-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cfg-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-lowest);
  padding: 4px 4px 4px 14px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  transition: box-shadow 0.2s;
}
.cfg-id-row:focus-within {
  box-shadow: inset 0 0 0 2px var(--primary);
}
.cfg-id-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--outline);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.cfg-id-input {
  width: 100%;
  height: 32px;
  border: none;
  background: transparent;
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
  outline: none;
  padding: 0 10px;
}
.cfg-id-input:focus {
  box-shadow: none;
}

/* Config info note */
.cfg-info-note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: var(--primary-light);
  border-radius: 8px;
  color: var(--primary);
  align-items: flex-start;
}
.cfg-info-note p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--primary-hover);
}

/* Config progress */
.cfg-progress {
  padding: 0 28px 12px;
}
.cfg-progress-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--secondary);
}
.cfg-progress-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.cfg-progress-status {
  font-size: 10px;
  color: var(--outline);
  font-style: italic;
  margin-top: 6px;
}

/* Config footer */
.cfg-footer {
  padding: 18px 28px;
  border-top: 1px solid rgba(114,119,129,0.12);
  background: var(--surface);
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ══ Page Slide Track (Prepare <-> Init) ═══════════════════ */
.slide-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translateX(0);
  transition: transform 0.32s linear;
  will-change: transform;
}
.slide-track.go-left {
  transform: translateX(-50%);
}
.slide-panel {
  width: 50%;
  height: 100%;
  flex-shrink: 0;
  overflow-y: auto;
}

/* ══ Init Loading Overlay ═══════════════════════════════════ */
.init-loading-overlay {
  position: absolute;
  inset: 40px 0 0 0;
  z-index: 28;
  display: grid;
  place-items: center;
  padding: 24px 24px 24px;
  background: rgba(242, 245, 248, 0.92);
}
.init-loading-card {
  position: relative;
  width: min(520px, 100%);
  min-height: 340px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.72);
  box-shadow:
    0 24px 60px rgba(46,67,90,0.12),
    inset 0 1px 0 rgba(255,255,255,0.84);
  padding: 0;
  overflow: hidden;
  text-align: center;
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}
.init-loading-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), transparent 34%),
    radial-gradient(circle at 50% 38%, rgba(163, 201, 255, 0.18), transparent 24%);
  pointer-events: none;
}
.init-loading-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-bottom: 36px;
}
.init-loading-visual {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}
.init-loading-sync-wire {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.init-loading-sync-frame {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  display: grid;
  place-items: center;
}
.init-loading-sync-frame {
  border: 1px solid rgba(0, 75, 135, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.42),
    0 10px 24px rgba(92, 112, 132, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.16));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.init-loading-sync-icon {
  font-size: 56px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.init-loading-sync-icon--wire {
  color: rgba(0, 75, 135, 0.74);
  opacity: 0.94;
  filter: drop-shadow(0 2px 8px rgba(163, 201, 255, 0.18));
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;
}
.init-loading-title-block {
  text-align: center;
}
.init-loading-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0b4b82;
}
.init-loading-subtitle {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(11, 75, 130, 0.52);
  font-weight: 700;
}
.init-loading-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 34px 28px;
  display: grid;
  gap: 14px;
}
.init-loading-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.init-loading-footer-copy {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 52, 97, 0.42);
  font-weight: 600;
}
.init-loading-mode-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 52, 97, 0.42);
  font-weight: 600;
}
.init-loading-progress {
  height: 2px;
  width: 100%;
  background: rgba(0, 75, 135, 0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.init-loading-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(0,75,135,0.18), #004b87, rgba(163,201,255,0.95));
  border-radius: inherit;
  animation: initSyncProgressFill 5s linear forwards;
  position: relative;
}
.init-loading-progress-fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28));
  filter: blur(2px);
}

@keyframes initSyncProgressFill {
  from { width: 0; }
  to { width: 100%; }
}

.init-loading-overlay--test .init-loading-sync-frame {
  border-color: rgba(0, 95, 157, 0.14);
}
.init-loading-overlay--test .init-loading-sync-icon--wire {
  color: rgba(0, 95, 157, 0.74);
}
.init-loading-overlay--test .init-loading-mode-chip,
.init-loading-overlay--test .init-loading-footer-copy {
  color: rgba(0, 95, 157, 0.48);
}

#app.init-loading-active .statusbar {
  opacity: 0.88;
}

@media (max-width: 520px) {
  .init-loading-card {
    width: 100%;
    min-height: 320px;
  }
  .init-loading-visual {
    width: 120px;
    height: 120px;
  }
  .init-loading-sync-frame,
  .init-loading-sync-frame {
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }
  .init-loading-sync-icon {
    font-size: 50px;
  }
  .init-loading-title {
    font-size: 22px;
  }
  .init-loading-subtitle {
    letter-spacing: 0.28em;
    padding: 0 18px;
  }
  .init-loading-footer {
    padding: 22px 22px 24px;
  }
  .init-loading-footer-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}
/* ══ Radio Groups (generic) ═════════════════════════════════ */
.radio-group {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 14px 16px;
}
.radio-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.radio-options {
  display: flex;
  gap: 24px;
}
.radio-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--on-surface);
}
.radio-opt input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  border: none;
  box-shadow: none;
  border-radius: 50%;
}

/* ══ Buttons ══════════════════════════════════════════════ */
.btn {
  font-family: var(--font-ui-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.1s;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn .material-symbols-outlined { font-size: 16px; flex-shrink: 0; }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 2px 6px rgba(0,75,135,0.18);
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 12px rgba(0,75,135,0.24); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,75,135,0.04); }

.btn-tonal {
  background: var(--secondary-container);
  color: var(--secondary);
  border: none;
}
.btn-tonal:hover { background: #bcd8ea; }

.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #a01616; }

.btn-sm { height: 34px; padding: 0 12px; font-size: 12px; border-radius: 7px; }
.btn-sm .material-symbols-outlined { font-size: 14px; }

.btn-icon-sm { width: 34px; height: 34px; padding: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ══ Log Panel ══════════════════════════════════════════════ */
.log-panel {
  height: 240px;
  overflow-y: auto;
  background: #f7f9fb;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  font-feature-settings: "liga" 0;
  -webkit-font-smoothing: antialiased;
}
.execute-log-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.execute-log-card .log-panel {
  flex: 1;
  height: auto;
  min-height: 240px;
}
.log-panel::-webkit-scrollbar { width: 4px; }
.log-panel::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 4px; }
.log-line {
  display: block;
  white-space: pre-wrap;
}
.log-info  { color: #0d5cb6; }
.log-ok    { color: var(--success); }
.log-err   { color: var(--error); }
.log-muted { color: var(--outline); }
.log-ts    { color: var(--outline-variant); margin-right: 4px; }

/* ══ KPI Row ══════════════════════════════════════════════ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.kpi-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.kpi-label {
  font-family: var(--font-ui-small);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: var(--outline);
}
.kpi-value {
  font-size: 14px;
  font-weight: 700;
  margin-top: 5px;
  color: var(--on-surface);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

/* ══ Progress Bar ════════════════════════════════════════════ */
.progress-bar-wrap {
  height: 4px;
  background: var(--surface-container);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.35s ease;
}

/* ══ Progress Ring ══════════════════════════════════════════ */
.progress-ring-wrap { text-align: center; padding: 12px 0; }
.progress-ring {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0deg, var(--surface-container) 0deg);
  display: grid;
  place-items: center;
  margin: 0 auto;
  transition: background 0.4s;
}
.progress-ring::before {
  content: attr(data-progress) "%";
  width: 104px; height: 104px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-lowest);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid rgba(0,0,0,0.05);
}

/* ══ Dialog ══════════════════════════════════════════════ */
.dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 9998;
  animation: fadeIn 0.15s ease;
}
.dialog-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-card, 0 20px 60px rgba(0,0,0,0.14));
  min-width: 480px;
  max-width: 92vw;
  animation: slideUp 0.2s ease;
  color: var(--on-surface);
}

/* 许可证管理（外壳复用 proj-wizard-*） */
.lic-mgmt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 10px;
}
.lic-mgmt-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lic-mgmt-user-toggle {
  flex-shrink: 0;
  gap: 6px;
}
.lic-mgmt-user-toggle .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: "wght" 400;
}
.lic-mgmt-user-toggle--on {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant));
  background: rgba(0, 75, 135, 0.06);
  color: var(--primary);
}
.lic-mgmt-table-wrap {
  max-height: min(42vh, 320px);
  overflow: auto;
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
  background: var(--surface);
}
.lic-mgmt-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lic-mgmt-col-file {
  width: 36%;
}
.lic-mgmt-col-user {
  width: 24%;
}
.lic-mgmt-col-exp {
  width: 20%;
}
.lic-mgmt-col-st {
  width: 12%;
}
.lic-mgmt-col-act {
  width: 88px;
}
.lic-mgmt-table th,
.lic-mgmt-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: middle;
}
.lic-mgmt-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
  background: rgba(0, 75, 135, 0.04);
  position: sticky;
  top: 0;
  z-index: 1;
}
.lic-mgmt-table td:nth-child(1) {
  word-break: break-all;
}
.lic-mgmt-table td:nth-child(2) {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.lic-mgmt-table tr:last-child td {
  border-bottom: none;
}
.lic-mgmt-table .lic-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--on-surface);
}
.lic-mgmt-user-cell {
  font-weight: 500;
  color: var(--on-surface);
  word-break: break-all;
  font-size: 12px;
}
.lic-mgmt-actions {
  text-align: right;
  white-space: nowrap;
}
.lic-mgmt-ok {
  color: #0d7a52;
  font-weight: 600;
}
.lic-mgmt-bad {
  color: var(--error, #b3261e);
  font-weight: 600;
}
.lic-mgmt-empty {
  margin: 0;
  padding: 20px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--on-surface-variant);
}

.dep-missing-card {
  width: min(680px, 94vw);
  min-width: min(680px, 94vw);
  border-top: 3px solid var(--error);
}

.dep-missing-title {
  margin-bottom: 12px;
  color: var(--error);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dep-missing-title .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: "wght" 300;
}

.dep-missing-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-surface-variant);
  margin-bottom: 12px;
}

.dep-missing-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(40vh, 260px);
  overflow: auto;
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
  background: var(--surface);
}

.dep-missing-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--outline-variant);
}

.dep-missing-item:last-child {
  border-bottom: none;
}

.dep-missing-item code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dep-missing-name {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  padding: 2px 8px;
}

.dep-missing-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/* CANoe / Vector XL 依赖提示：成功路径的临时预览用主色顶条，与错误态 dep-missing 区分 */
.canoe-xl-dep-card.canoe-xl-dep-card--preview {
  border-top-color: var(--primary);
}
.canoe-xl-dep-card--preview .dep-missing-title {
  color: var(--primary);
}

.canoe-xl-dep-body p {
  margin: 0 0 0.65em;
}
.canoe-xl-dep-body p:last-child {
  margin-bottom: 0;
}
.canoe-xl-dep-body code {
  font-family: var(--font-mono);
  font-size: 12px;
}

.canoe-xl-dep-card .dep-missing-actions .btn {
  min-width: 96px;
}

[data-theme="dark"] .dialog-overlay {
  background: rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .dialog-card {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .dep-missing-list {
  background: rgba(255, 255, 255, 0.02);
}

.app-close-card {
  width: min(480px, 94vw);
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: var(--surface-lowest);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.app-close-header-alt {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.app-close-icon-alt {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 75, 135, 0.1), rgba(0, 75, 135, 0.02));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 75, 135, 0.1);
}

.app-close-icon-alt .material-symbols-outlined {
  font-size: 28px;
  font-variation-settings: 'wght' 300;
}

.app-close-title-alt {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.3;
}

.app-close-subtitle-alt {
  margin: 0;
  font-size: 13px;
  color: var(--on-surface-variant);
  line-height: 1.6;
  max-width: 360px;
}

.app-close-proj-name {
  font-weight: 600;
  color: var(--on-surface);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--outline-variant);
}

.app-close-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-close-choice-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.app-close-choice-btn:hover {
  background: var(--surface-container);
  border-color: var(--outline);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.app-close-choice-btn.recommended {
  border-color: rgba(0, 75, 135, 0.3);
  background: linear-gradient(to right, rgba(0, 75, 135, 0.03), transparent);
}

.app-close-choice-btn.recommended:hover {
  border-color: var(--primary);
  background: linear-gradient(to right, rgba(0, 75, 135, 0.06), rgba(0, 75, 135, 0.01));
}

.app-close-choice-btn.danger:hover {
  border-color: rgba(186, 26, 26, 0.4);
  background: linear-gradient(to right, rgba(186, 26, 26, 0.04), transparent);
}

.app-close-choice-btn.danger:hover .choice-icon {
  color: var(--error);
  background: rgba(186, 26, 26, 0.1);
}

.app-close-choice-btn .choice-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.app-close-choice-btn.recommended .choice-icon {
  background: rgba(0, 75, 135, 0.1);
  color: var(--primary);
}

.app-close-choice-btn .choice-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-close-choice-btn .choice-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-surface);
}

.app-close-choice-btn .choice-desc {
  font-size: 12px;
  color: var(--on-surface-variant);
  line-height: 1.4;
}

.app-close-choice-btn .choice-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-bottom-left-radius: 12px;
  letter-spacing: 0.05em;
}

.app-close-footer {
  display: flex;
  justify-content: center;
  margin-top: -4px;
}

.app-close-cancel-btn {
  min-width: 120px;
  border-color: transparent;
  color: var(--on-surface-variant);
}

.app-close-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--outline-variant);
  color: var(--on-surface);
}

[data-theme="dark"] .app-close-icon-alt {
  background: linear-gradient(135deg, rgba(3, 105, 161, 0.2), rgba(3, 105, 161, 0.05));
  box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.2);
}

[data-theme="dark"] .app-close-proj-name {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .app-close-choice-btn .choice-icon {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .app-close-choice-btn.recommended .choice-icon {
  background: rgba(3, 105, 161, 0.2);
}

[data-theme="dark"] .app-close-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* .udsflow 导入方式选择 */
.ff-import-choice-desc {
  font-size: 13px;
  color: var(--on-surface-variant);
  line-height: 1.55;
  margin-bottom: 12px;
}
.ff-import-choice-filename {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-surface);
  word-break: break-all;
}
.ff-import-choice-hint {
  font-size: 12px;
  color: var(--outline);
  line-height: 1.5;
  margin: 0 0 18px 1em;
  padding: 0;
}
.ff-import-choice-hint li { margin-bottom: 6px; }
.ff-import-choice-actions {
  margin-top: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* 自定义测试序列：从文字导入 Hex */
.ff-orders-text-import-card.dialog-card {
  max-width: 580px;
  width: min(580px, 92vw);
}
.ff-orders-text-import-textarea {
  width: 100%;
  min-height: 220px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  color: var(--on-surface);
  resize: vertical;
}
.ff-orders-text-import-textarea:focus {
  outline: 2px solid rgba(0, 75, 135, 0.35);
  border-color: var(--primary);
}
.ff-orders-text-import-preview-block {
  margin-top: 10px;
}
.ff-orders-text-import-preview-summary {
  font-size: 12px;
  color: var(--on-surface-variant);
  line-height: 1.45;
  margin-bottom: 6px;
}
.ff-orders-text-import-preview-list {
  max-height: 200px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  padding: 6px 0;
}
.ff-orders-text-import-preview-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.ff-orders-text-import-preview-row:nth-child(even) {
  background: color-mix(in srgb, var(--on-surface) 4%, transparent);
}
.ff-orders-text-import-preview-no {
  flex-shrink: 0;
  min-width: 1.5em;
  font-variant-numeric: tabular-nums;
  color: var(--outline);
  font-weight: 600;
}
.ff-orders-text-import-preview-hex {
  font-family: var(--font-mono);
  font-size: 11px;
  word-break: break-all;
  color: var(--on-surface);
}
.ff-mono-inline {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-container-highest);
}

.byte-cell {
  height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
}
.byte-cell:focus {
  outline: 2px solid rgba(0,75,135,0.35);
  border-color: var(--primary);
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }

/* ══ Table ══════════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--outline);
  padding: 8px 10px;
  border-bottom: 2px solid var(--outline-variant);
}
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  color: var(--on-surface);
}
.data-table td[contenteditable] { cursor: text; }
.data-table td[contenteditable]:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: 3px;
  background: #fff;
}
.data-table tbody tr:hover { background: rgba(0,75,135,0.025); }

/* ══ Toast ══════════════════════════════════════════════ */
.toast-wrap {
  position: fixed;
  right: 16px;
  bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 9999;
  pointer-events: none;
}
.toast {
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 4px solid var(--primary);
  padding: 9px 13px;
  border-radius: 8px;
  min-width: 230px;
  font-size: 13px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  animation: slideIn 0.25s ease;
}
.toast.error   { border-left-color: var(--error); }
.toast.success { border-left-color: var(--success); }
@keyframes slideIn { from { opacity:0; transform:translateX(16px) } to { opacity:1; transform:translateX(0) } }

/* ══ Info Note Box ══════════════════════════════════════════ */
.info-note {
  background: rgba(0,75,135,0.05);
  border-radius: 8px;
  padding: 11px 14px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.info-note .material-symbols-outlined {
  font-size: 15px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}
.info-note span:last-child {
  font-size: 12px;
  color: var(--on-surface-variant);
  line-height: 1.5;
}

/* ══ Diagnostic workbench (console → 诊断控制) ═══════════════ */
.diag-workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.console-diag-dash-wrap {
  margin-bottom: 16px;
}
.diag-local-dash {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1200px) {
  .diag-local-dash {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .diag-local-dash {
    grid-template-columns: 1fr;
  }
}
.diag-dash-item {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(145deg, var(--surface-lowest) 0%, rgba(255,255,255,0.97) 100%);
  border: 1px solid rgba(0, 75, 135, 0.09);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 14px rgba(0, 75, 135, 0.06);
}
.diag-dash-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-light) 0%, rgba(211, 228, 255, 0.6) 100%);
  color: var(--primary);
}
.diag-dash-icon-wrap .material-symbols-outlined { font-size: 18px; }
.diag-dash-icon-com {
  background: linear-gradient(135deg, rgba(0, 109, 46, 0.12) 0%, rgba(76, 175, 128, 0.15) 100%);
  color: var(--success);
}
.diag-dash-icon-unlock {
  background: linear-gradient(135deg, rgba(123, 31, 162, 0.1) 0%, rgba(156, 39, 176, 0.12) 100%);
  color: #7b1fa2;
}
.diag-dash-icon-dtc {
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.12) 0%, rgba(245, 166, 35, 0.16) 100%);
  color: #c66900;
}
.diag-dash-text { min-width: 0; flex: 1; }
.diag-dash-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--outline);
}
.diag-dash-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--on-surface-variant);
  margin-top: 5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.diag-dash-value.diag-dash-value-live {
  color: var(--primary);
}
.diag-dash-value.diag-dash-value-tone-ok {
  color: var(--success);
}
.diag-dash-value.diag-dash-value-tone-warn {
  color: #b37a00;
}
.diag-dash-value.diag-dash-value-tone-err {
  color: var(--error);
}
.diag-dash-value.diag-dash-value-auto-revert {
  animation: diag-dash-auto-revert 0.85s ease;
}

@keyframes diag-dash-auto-revert {
  0% {
    transform: translateY(-1px) scale(1.018);
    filter: saturate(1.2);
  }
  45% {
    transform: translateY(0) scale(0.994);
    filter: saturate(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }
}
.diag-dash-hint {
  font-size: 10px;
  color: var(--on-surface-variant);
  margin-top: 4px;
  opacity: 0.88;
}
.diag-split {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(260px, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  flex: 1;
}
.diag-col-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.diag-control-card {
  padding: 12px 14px;
}
.diag-control-card .section-title { margin-bottom: 8px; }
.diag-panel-lead {
  font-size: 10.5px;
  color: var(--on-surface-variant);
  line-height: 1.45;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.diag-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.diag-tile-grid--2 { grid-template-columns: 1fr 1fr; }
.diag-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  text-align: left;
  border: 1px solid rgba(0, 75, 135, 0.22);
  border-radius: 10px;
  background: linear-gradient(165deg, var(--surface-lowest) 0%, rgba(255, 255, 255, 0.92) 100%);
  box-shadow: 0 2px 8px rgba(12, 33, 66, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
  font: inherit;
  color: inherit;
}
.diag-tile:hover {
  border-color: rgba(0, 75, 135, 0.45);
  box-shadow: 0 8px 18px rgba(0, 75, 135, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.diag-tile:active {
  transform: scale(0.992);
  box-shadow: 0 3px 8px rgba(0, 75, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.diag-tile-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(0, 75, 135, 0.09);
  color: var(--primary);
}
.diag-tile-icon .material-symbols-outlined { font-size: 17px; }
.diag-tile-body { min-width: 0; }
.diag-tile-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.diag-tile-desc {
  display: none;
}
.diag-tile--recommended {
  border-color: rgba(0, 75, 135, 0.38);
  background: linear-gradient(165deg, rgba(211, 228, 255, 0.45) 0%, var(--surface-lowest) 100%);
  box-shadow: 0 3px 10px rgba(0, 75, 135, 0.14);
}
.diag-tile--recommended .diag-tile-icon {
  background: var(--primary);
  color: var(--on-primary);
}
.diag-tile--risk:hover {
  border-color: rgba(186, 26, 26, 0.35);
}
.diag-tile--risk .diag-tile-icon {
  background: rgba(186, 26, 26, 0.1);
  color: var(--error);
}
.diag-keepalive-tile {
  border-style: dashed;
  border-color: rgba(87, 96, 112, 0.38);
  background: linear-gradient(165deg, rgba(244, 247, 252, 0.95) 0%, #fff 100%);
}
.diag-keepalive-tile .diag-tile-icon {
  background: rgba(87, 96, 112, 0.12);
  color: #4f5b6d;
}
.diag-keepalive-tile .diag-tile-title {
  color: #4f5b6d;
}
.diag-keepalive-tile--active {
  border-style: solid;
  border-color: rgba(0, 75, 135, 0.55);
  background: linear-gradient(165deg, rgba(208, 231, 255, 0.62) 0%, rgba(238, 247, 255, 0.92) 100%);
  box-shadow: 0 8px 20px rgba(0, 75, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.diag-keepalive-tile--active .diag-tile-icon {
  background: var(--primary);
  color: #fff;
  animation: diag-keepalive-pulse 1.8s ease-in-out infinite;
}
.diag-keepalive-tile--active .diag-tile-title {
  color: var(--primary);
}

@keyframes diag-keepalive-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 75, 135, 0.26); }
  50% { box-shadow: 0 0 0 6px rgba(0, 75, 135, 0.08); }
}
.diag-log-card {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  min-width: 0;
  padding: 18px 20px;
}
.diag-log-card .log-panel {
  flex: 1;
  height: auto;
  min-height: 0;
}

/* ══ Execute Control ═══════════════════════════════════════ */
.execute-workbench {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.execute-split {
  display: grid;
  grid-template-columns: minmax(340px, 460px) minmax(260px, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
}
.execute-split-compact {
  align-items: start;
}
.execute-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.execute-card-compact {
  justify-content: flex-start;
}
.execute-lead {
  margin-bottom: 10px;
}
.execute-lead-compact {
  margin-bottom: 6px;
  padding-bottom: 6px;
}
.fault-lead {
  text-align: left;
}
.fault-service-note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--on-surface-variant);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,75,135,0.05);
  border: 1px solid rgba(0,75,135,0.10);
}
.exec-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.exec-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sec-form {
  gap: 14px;
}
.exec-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.exec-toolbar-3 {
  grid-template-columns: repeat(3, 1fr);
}
.exec-toolbar-btn {
  width: 100%;
  height: 36px;
  justify-content: center;
  gap: 6px;
}
.sec-level-stepper {
  display: grid;
  grid-template-columns: 34px 96px 34px;
  gap: 8px;
  align-items: center;
}
.sec-level-input {
  height: 34px;
  text-align: center;
  font-family: var(--font-mono);
  border-radius: 8px;
}
.sec-dll-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.sec-dll-btn {
  height: 40px;
  padding: 0 12px;
  justify-content: center;
  min-width: 88px;
}
.sec-dll-btn--icon {
  min-width: 0;
  width: 40px;
  padding: 0;
}
/* 文件宏 chip 显示区域（替换 readonly input 显示） */
.sec-dll-input-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.ff-input-val-wrap {
  position: relative;
}

/* 刷写程序 / 自定义诊断与测试序列全局输入：拖放文件时的投放区高亮 */
.ff-input-val-wrap.flashp-drop-target,
.ff-input-val-wrap.ff-global-input-dnd-hover {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

.ff-input-macro-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #FFE9C4;
  border: 1px solid #FFB74D;
  position: absolute;
  left: 8px;
  top: 8px; /* 贴着输入内容行，避免偏下 */
  transform: none;
  pointer-events: auto;
}
.ff-input-macro-chip-wrap .ff-file-macro-chip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-input-macro-chip-clear {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  color: var(--outline);
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.ff-input-macro-chip-clear:hover { color: var(--on-surface); background: var(--surface-container); }

/* ── 安全服务：预设卡片 ── */
.sec-no-preset-tip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--outline);
  padding: 7px 10px;
  background: var(--surface-container);
  border-radius: 8px;
  margin-bottom: 2px;
}
.sec-no-preset-tip .material-symbols-outlined {
  font-size: 14px;
  flex-shrink: 0;
}
.sec-preset-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-lowest));
  border: 1.5px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 10px;
}
.sec-preset-card-icon {
  font-size: 22px;
  color: var(--primary);
  flex-shrink: 0;
}
.sec-preset-card-body {
  flex: 1;
  min-width: 0;
}
.sec-preset-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sec-preset-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.sec-preset-level-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-mono);
}
.sec-preset-from-tag {
  font-size: 10px;
  color: var(--primary);
  font-weight: 500;
}
.sec-preset-clear-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.sec-preset-clear-btn:hover {
  opacity: 1;
}

/* ── 安全服务：通用设置折叠区 ── */
.sec-advanced {
  border: 1px solid var(--outline-variant);
  border-radius: 9px;
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 8px;
}
.sec-advanced-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--on-surface-variant);
  user-select: none;
  list-style: none;
  background: var(--surface-container);
  transition: background 0.15s;
}
.sec-advanced-summary::-webkit-details-marker { display: none; }
.sec-advanced-summary::marker { display: none; }
.sec-advanced[open] .sec-advanced-summary {
  border-bottom: 1px solid var(--outline-variant);
}
.sec-advanced-summary:hover {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-container));
}
.sec-advanced-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sec-level-hint-text {
  font-size: 11px;
  color: var(--outline);
  margin-bottom: 4px;
}
.sec-level-warn {
  font-size: 11px;
  color: var(--warning, #e6a117);
  margin-bottom: 4px;
}

/* 暗色主题适配 */
[data-theme="dark"] .sec-preset-card {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
[data-theme="dark"] .sec-no-preset-tip {
  background: var(--surface-container);
}
[data-theme="dark"] .sec-advanced-summary {
  background: var(--surface-container);
}

.byte-add-count {
  width: 74px;
  height: 32px;
  text-align: center;
  border-radius: 7px;
  border: 1px solid var(--outline-variant);
  font-family: var(--font-mono);
  font-size: 12px;
}
.byte-section {
  background: rgba(0,75,135,0.04);
  border: 1px solid rgba(0,75,135,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.byte-section-title {
  font-family: var(--font-ui-small);
  font-size: 11px;
  font-weight: 600;
  color: var(--outline);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.byte-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.byte-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.byte-preview {
  min-height: 40px;
  background: var(--surface-container);
  border-radius: 8px;
  padding: 9px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 6px;
}
.byte-error {
  margin-top: 8px;
  color: var(--error);
  font-size: 12px;
}
.byte-cell.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0,75,135,0.2);
}
.byte-cell.invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(186,26,26,0.15);
}

/* ══ Global dashboard (post-init) ═══════════════════════════ */
.gd-shell {
  flex: 1;
  overflow: auto;
  padding: 20px 24px 28px;
  background: linear-gradient(165deg, var(--surface-container-lowest) 0%, var(--surface) 42%, var(--surface-container-low) 100%);
  font-family: var(--font-ui);
}
.gd-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 75, 135, 0.12);
}
.gd-title {
  font-family: var(--font-title);
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #334155;
}
.gd-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--secondary);
  max-width: 560px;
  line-height: 1.45;
}
.gd-hero-notice {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--outline);
  max-width: 560px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 75, 135, 0.06);
  border: 1px solid rgba(0, 75, 135, 0.1);
}
.gd-hero-notice strong {
  color: var(--on-surface-variant);
  font-weight: 700;
}
.gd-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex-shrink: 0;
  min-width: min(100%, 200px);
}
@media (min-width: 720px) {
  .gd-hero-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}
.gd-enter {
  flex-shrink: 0;
  height: 44px;
  padding: 0 20px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 75, 135, 0.22);
}
.gd-enter .material-symbols-outlined {
  vertical-align: middle;
  margin-right: 2px;
}
.gd-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gd-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) {
  .gd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gd-row { grid-template-columns: 1fr; }
}
.gd-tile {
  background: var(--surface-lowest);
  border: 1px solid rgba(0, 75, 135, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.gd-tile:hover {
  border-color: rgba(0, 75, 135, 0.18);
  box-shadow: 0 4px 16px rgba(0, 75, 135, 0.08);
}
.gd-tile--wide {
  grid-column: 1 / -1;
}
.gd-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.gd-tile-icon {
  font-size: 20px;
  color: var(--primary);
  opacity: 0.9;
}
.gd-tile-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--outline);
}
.gd-tile-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-surface-variant);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  word-break: break-word;
}
.gd-tile-value--sm {
  font-size: 13px;
  font-weight: 600;
}
/* 仪表盘内诊断同步项：默认灰字；有 tone 类时让 tone 色优先 */
.gd-tile .diag-dash-value {
  font-weight: 600;
}
.gd-tile .diag-dash-value:not(.diag-dash-value-tone-ok):not(.diag-dash-value-tone-warn):not(.diag-dash-value-tone-err):not(.diag-dash-value-live) {
  color: var(--on-surface-variant);
}
.gd-value-state-ok {
  color: var(--success) !important;
}
.gd-value-state-warn {
  color: #b37a00 !important;
}
.gd-value-state-err {
  color: var(--error) !important;
}
.gd-value-state-muted {
  color: var(--secondary) !important;
}

/* ══ Custom Flash Flow ══════════════════════════════════════ */
.ff-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 自定义诊断 · 执行日志卡片：标题与导出/查看并排，与工具栏风格一致 */
.ff-log-card .ff-log-card-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.ff-log-card .ff-log-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ff-log-card .ff-log-toolbar-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ff-toolbar-card { padding: 12px 16px; }
.ff-toolbar-card.ff-toolbar-dnd-hover {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
  border-radius: 12px;
}
.ff-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.ff-step-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  letter-spacing: 0.02em;
}
.ff-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  color: var(--outline);
  font-size: 13px;
  text-align: center;
  border: 1px dashed var(--outline-variant);
  border-radius: 10px;
  background: var(--surface-lowest);
  gap: 4px;
}
.ff-step-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.ff-step-card:hover { border-color: rgba(0,75,135,0.15); }
.ff-step-card--compute {
  background: linear-gradient(180deg, #fcfdfd 0%, #fbfcfc 100%);
  border-color: rgba(0, 131, 143, 0.14);
  border-style: dashed;
  margin-left: 14px;
}
.ff-step-card--compute:hover {
  border-color: rgba(0, 131, 143, 0.22);
}
.ff-step-card--compute .ff-step-header {
  opacity: 0.8;
}
.ff-step-card--compute .ff-method-badge {
  filter: saturate(0.62);
}
.ff-step-card--compute .ff-step-index {
  background: #eef3f4;
  color: #8aa0a6;
}
.ff-step-card--compute .ff-step-name {
  color: color-mix(in srgb, var(--on-surface) 78%, #6a7f85);
}
.ff-step-card--compute .ff-var-badge {
  background: rgba(0, 131, 143, 0.06);
  color: #5d7f83;
}
.ff-step-card--compute .ff-status-wrap {
  opacity: 0.75;
}
.ff-step-card--expanded {
  border-color: rgba(0,75,135,0.22);
  box-shadow: 0 3px 14px rgba(0,75,135,0.07);
  overflow: visible;
}
.ff-step-card--compute.ff-step-card--expanded {
  border-color: rgba(0, 131, 143, 0.28);
  box-shadow: 0 3px 12px rgba(0, 131, 143, 0.06);
  overflow: visible;
}
.ff-step-card.drag-over {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0,75,135,0.18);
}
.ff-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  min-height: 44px;
  cursor: default;
}
.ff-drag-handle {
  font-size: 18px;
  color: var(--outline-variant);
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
  transition: color 0.12s;
}
.ff-drag-handle:hover { color: var(--outline); }
.ff-drag-handle:active { cursor: grabbing; }
.ff-step-index {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-container);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--on-surface-variant);
  flex-shrink: 0;
}
.ff-method-badge {
  font-family: var(--font-ui-zh);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid;
  flex-shrink: 0;
  letter-spacing: 0;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.desktop-shell-electron .btn,
body.desktop-shell-electron .btn-sm,
body.desktop-shell-electron .btn-icon-sm,
body.desktop-shell-electron .nav-tab,
body.desktop-shell-electron .proj-active-label,
body.desktop-shell-electron .section-title,
body.desktop-shell-electron .ff-step-name,
body.desktop-shell-electron .ff-input-label-primary,
body.desktop-shell-electron .ff-delay-badge,
body.desktop-shell-electron .ff-periodic-badge,
body.desktop-shell-electron .ff-step-addr,
body.desktop-shell-electron .statusbar,
body.desktop-shell-electron label,
body.desktop-shell-electron select,
body.desktop-shell-electron option {
  font-family: var(--font-ui-zh);
}
.ff-step-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.ff-step-addr {
  font-size: 11px;
  color: var(--outline);
  flex-shrink: 0;
  white-space: nowrap;
}

.ff-id-input-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border-bottom: 2px solid var(--outline-variant);
  border-radius: 6px 6px 0 0;
  background: #fff;
  overflow: hidden;
}
.ff-id-prefix {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--outline);
  padding: 8px 6px 8px 10px;
  user-select: none;
}
.ff-id-input-wrap input {
  border: none !important;
  border-radius: 0 !important;
  padding-left: 2px !important;
}
/* 聚焦时由整行容器承担高亮，避免内层 input 的 box-shadow 在「0x」与内容之间形成竖条状视觉 */
.ff-id-input-wrap:focus-within {
  border-bottom-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 75, 135, 0.07);
  background: #fff;
}
.ff-id-input-wrap input:focus {
  box-shadow: none !important;
  background: transparent !important;
}

/* 带项目预设候选的 ID 输入框容器 */
.ff-id-preset-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.ff-preset-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 100%;
  border: none;
  border-bottom: 2px solid var(--outline-variant);
  border-radius: 6px 6px 0 0;
  background: #f5f6fa;
  color: var(--outline);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-bottom-color 0.15s;
  padding: 0;
}
.ff-preset-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.ff-preset-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 120;
  min-width: 180px;
  max-width: 260px;
  background: var(--surface);
  border: 1px solid rgba(114,119,129,0.18);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-preset-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s;
}
.ff-preset-opt:hover {
  background: var(--primary-light);
}
.ff-preset-opt-id {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
}
.ff-preset-opt-label {
  font-size: 11px;
  color: var(--on-surface-variant, var(--outline));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ff-expect-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0,75,135,0.07);
  color: var(--primary);
  font-family: var(--font-mono);
  flex-shrink: 0;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-match-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  flex-shrink: 0;
  white-space: nowrap;
}
.ff-match-badge--exact {
  background: rgba(21, 101, 192, 0.10);
  color: #1565c0;
}
.ff-match-badge--fuzzy {
  background: rgba(255, 143, 0, 0.12);
  color: #c77800;
}
.ff-step-form {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ff-form-row {
  display: grid;
  gap: 10px;
}
.ff-form-row-2 { grid-template-columns: 1fr 1fr; }
.ff-form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
/* 步骤编辑 · 类型：自定义下拉，选项内主标题 + UDS 副文案（同登录页服务模式样式思路） */
.ff-method-type-field {
  min-width: 0;
}
.ff-method-type-wrap {
  min-width: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ff-method-accent, var(--primary)) 24%, var(--outline-variant));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--ff-method-accent, var(--primary)) 7%, var(--surface-lowest)) 0%,
    var(--surface-lowest) 55%,
    var(--surface-lowest) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  overflow: visible;
}
.ff-method-custom-select {
  position: relative;
  z-index: 1;
}
.ff-method-custom-select.open {
  z-index: 40;
}
/* 触发条不再画底边线：外层 wrap 已有完整圆角边框，避免与原生 select 的「下划线」叠成双横线 */
.ff-method-type-wrap .ff-method-custom-select .custom-select-trigger {
  width: 100%;
  height: 40px;
  margin: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ff-method-type-wrap .ff-method-custom-select .custom-select-trigger:hover {
  background: color-mix(in srgb, var(--ff-method-accent, var(--primary)) 5%, transparent);
}
/* 展开时高亮外框，由 wrap 承担 focus ring，触发条本身不再加底部描边 */
.ff-method-type-wrap .ff-method-custom-select.open .custom-select-trigger {
  border: none;
  box-shadow: none;
  background: var(--surface);
}
.ff-method-type-wrap:has(.ff-method-custom-select.open) {
  border-color: color-mix(in srgb, var(--ff-method-accent, var(--primary)) 42%, var(--outline-variant));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    0 0 0 3px color-mix(in srgb, var(--ff-method-accent, var(--primary)) 14%, transparent);
}
[data-theme="dark"] .ff-method-type-wrap:has(.ff-method-custom-select.open) {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 0 0 3px color-mix(in srgb, var(--ff-method-accent, var(--primary)) 18%, transparent);
}
.ff-method-dd-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  flex: 1;
}
.ff-method-dd-chevron {
  font-size: 18px !important;
  color: var(--on-surface-variant);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ff-method-dd-options {
  left: -1px;
  right: -1px;
  width: auto;
  max-height: min(52vh, 380px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}
.ff-method-dd-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 11px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.ff-method-dd-option:hover {
  background: var(--surface);
}
.ff-method-dd-option.selected {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-lowest));
  box-shadow: inset 3px 0 0 var(--primary);
}
.ff-method-dd-swatch {
  width: 4px;
  align-self: stretch;
  min-height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 0.92;
}
.ff-method-dd-option-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ff-method-dd-option-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--on-surface);
}
.ff-method-dd-option-sub {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--on-surface-variant);
  white-space: normal;
}
[data-theme="dark"] .ff-method-type-wrap {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
[data-theme="dark"] .ff-method-dd-options {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .ff-method-dd-option.selected {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}

/* 步骤参数 / 宏类型 / 加密向导：与「类型」同逻辑的圆角外框 + 双行选项（无底边双线） */
.ff-field-dd-wrap {
  min-width: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ff-field-dd-accent, var(--primary)) 22%, var(--outline-variant));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--ff-field-dd-accent, var(--primary)) 6%, var(--surface-lowest)) 0%,
    var(--surface-lowest) 55%,
    var(--surface-lowest) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  overflow: visible;
}
.ff-field-dd {
  position: relative;
  z-index: 1;
}
.ff-field-dd.open {
  z-index: 40;
}
.ff-field-dd-wrap .ff-field-dd .custom-select-trigger {
  width: 100%;
  height: 40px;
  margin: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ff-field-dd-wrap .ff-field-dd .custom-select-trigger:hover {
  background: color-mix(in srgb, var(--ff-field-dd-accent, var(--primary)) 5%, transparent);
}
.ff-field-dd-wrap .ff-field-dd.open .custom-select-trigger {
  border: none;
  box-shadow: none;
  background: var(--surface);
}
.ff-field-dd-wrap:has(.ff-field-dd.open) {
  border-color: color-mix(in srgb, var(--ff-field-dd-accent, var(--primary)) 40%, var(--outline-variant));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    0 0 0 3px color-mix(in srgb, var(--ff-field-dd-accent, var(--primary)) 14%, transparent);
}
[data-theme="dark"] .ff-field-dd-wrap {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
[data-theme="dark"] .ff-field-dd-wrap:has(.ff-field-dd.open) {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    0 0 0 3px color-mix(in srgb, var(--ff-field-dd-accent, var(--primary)) 18%, transparent);
}

/* .field 内 ff-field-dd：与 input 同期（仅底边 + 顶圆角），下拉列表与选项样式不变 */
.field .ff-field-dd-wrap {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.field .ff-field-dd-wrap .ff-field-dd .custom-select-trigger {
  border: none;
  border-bottom: 2px solid var(--outline-variant);
  border-radius: 6px 6px 0 0;
  background: var(--surface-lowest);
  font-weight: 500;
  letter-spacing: normal;
  padding: 0 12px;
  height: 40px;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field .ff-field-dd-wrap .ff-field-dd .custom-select-trigger:hover {
  background: #fff;
  box-shadow: none;
}
.field .ff-field-dd-wrap .ff-field-dd.open .custom-select-trigger {
  border-bottom-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 75, 135, 0.07);
  background: #fff;
}
.field .ff-field-dd-wrap:has(.ff-field-dd.open) {
  border: none;
  box-shadow: none;
  background: transparent;
}
.field .ff-field-dd-options {
  left: 0;
  right: 0;
}
[data-theme="dark"] .field .ff-field-dd-wrap .ff-field-dd .custom-select-trigger {
  box-shadow: none;
}
[data-theme="dark"] .field .ff-field-dd-wrap .ff-field-dd .custom-select-trigger:hover {
  background: var(--surface);
}
[data-theme="dark"] .field .ff-field-dd-wrap .ff-field-dd.open .custom-select-trigger {
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.ff-field-dd-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  flex: 1;
}
.ff-field-dd-chevron {
  font-size: 18px !important;
  color: var(--on-surface-variant);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ff-field-dd.open .ff-field-dd-chevron,
.ff-method-custom-select.open .ff-method-dd-chevron {
  transform: rotate(180deg);
}
.ff-field-dd-options {
  left: -1px;
  right: -1px;
  width: auto;
  max-height: min(48vh, 340px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}
.ff-field-dd-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 11px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.ff-field-dd-opt:hover {
  background: var(--surface);
}
.ff-field-dd-opt.selected {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-lowest));
  box-shadow: inset 3px 0 0 var(--primary);
}
.ff-field-dd-swatch {
  width: 4px;
  align-self: stretch;
  min-height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--ff-field-dd-accent, var(--primary)) 65%, var(--outline-variant));
  opacity: 0.9;
}
.ff-field-dd-opt-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ff-field-dd-opt-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--on-surface);
}
.ff-field-dd-opt-sub {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--on-surface-variant);
  white-space: normal;
}

/* 无副标题的 ff-field-dd：展开列表与选项对齐硬件初始化 .cfg-dropdown-list / .cfg-dropdown-item */
.ff-field-dd-options.ff-field-dd-options--init-items {
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}
.field .ff-field-dd-options.ff-field-dd-options--init-items {
  left: 0;
  right: 0;
}
.ff-field-dd-opt--init {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface);
  border-radius: 6px;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
  box-shadow: none;
  align-items: unset;
  gap: 0;
}
.ff-field-dd-opt--init:hover {
  background: var(--surface);
}
.ff-field-dd-opt--init.selected {
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 600;
  box-shadow: none;
}
[data-theme="dark"] .ff-field-dd-options {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .ff-field-dd-opt.selected {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}
[data-theme="dark"] .ff-field-dd-opt--init.selected {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}
/* 加密向导：与初始化页相同的 cfg-dropdown，占满字段宽；打开时浮在下方控件之上 */
.ff-crypto-wizard .ff-cw-cfg-dropdown {
  width: 100%;
  min-width: 0;
}
.ff-crypto-wizard .ff-cw-cfg-dropdown.open {
  z-index: 80;
}

/* 解锁 ECU：左列仅占步进器宽度，右列占满剩余，避免中间大块留白 */
.ff-form-row-unlock {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.ff-field-unlock-level {
  width: max-content;
  max-width: 100%;
}
.ff-field-unlock-dll {
  min-width: 0;
}
/* 文件路径输入统一布局：输入框 + 插入宏 + 选择文件，同一行 */
.ff-file-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
}
.ff-file-row > input {
  min-width: 0;
}
/* 文件行旁的两个图标按钮：与 btn-icon-sm 一致，图标统一 14px */
.ff-file-row .ff-file-action-btn {
  flex-shrink: 0;
}
.ff-file-row .ff-file-action-btn .material-symbols-outlined {
  font-size: 14px;
}
.ff-add-btn {
  width: 100%;
  justify-content: center;
  gap: 6px;
  border: 1.5px dashed var(--outline-variant);
  color: var(--on-surface-variant);
  height: 40px;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ff-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0,75,135,0.04);
}

/* ── Flash Flow: 跳过按钮 & 状态 ────────────────────── */
/* 跳过图标按钮（右侧操作区，删除按钮左边）——尺寸/居中继承 btn-icon-sm */
.ff-skip-btn {
  border: 1px solid var(--outline-variant);
  background: transparent;
  color: var(--outline);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ff-skip-btn:hover {
  color: #bf6000;
  border-color: #bf6000;
  background: rgba(191,96,0,0.06);
}
/* 激活态：步骤已被标记为跳过 */
.ff-skip-btn--active {
  color: #bf6000;
  border-color: rgba(191,96,0,0.35);
  background: rgba(191,96,0,0.09);
}
.ff-skip-btn--active:hover {
  background: rgba(191,96,0,0.15);
}

/* 跳过状态下步骤卡片整体变暗 */
.ff-step-card--skipped {
  opacity: 0.55;
  background: repeating-linear-gradient(
    -45deg,
    #f9f9f9,
    #f9f9f9 6px,
    #f5f5f5 6px,
    #f5f5f5 12px
  );
}
.ff-step-name--skipped {
  text-decoration: line-through;
  color: var(--outline);
}

/* 执行中步骤高亮 */
.ff-step-card--running {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(0,75,135,0.15) !important;
}
.ff-step-card--done-ok {
  border-color: var(--success, #2E7D32) !important;
}
.ff-step-card--done-err {
  border-color: var(--error) !important;
  background: rgba(211,47,47,0.03);
}

/* 状态图标容器 */
.ff-status-wrap {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-status-ok.material-symbols-outlined  { color: var(--success, #2E7D32); font-size: 18px; }
.ff-status-err.material-symbols-outlined { color: var(--error); font-size: 18px; }
.ff-status-skip.material-symbols-outlined { color: var(--outline); font-size: 16px; }

/* 旋转加载圈 */
.ff-status-running { display: flex; align-items: center; justify-content: center; }
.ff-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,75,135,0.18);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ff-spin 0.7s linear infinite;
}
@keyframes ff-spin {
  to { transform: rotate(360deg); }
}

/* 步骤间延时徽标 */
.ff-delay-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(230,115,0,0.10);
  color: #bf6000;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ff-delay-icon {
  opacity: 0.9;
}

/* 自定义测试序列 · raw 周期发送徽标（与主题主色一致，避免 emoji 色块突兀） */
.ff-periodic-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--primary);
  background: rgba(0, 75, 135, 0.11);
  border: 1px solid rgba(0, 75, 135, 0.22);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .ff-periodic-badge {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  }
}
.ff-periodic-badge__icon {
  font-size: 13px;
  width: 14px;
  height: 14px;
  line-height: 14px;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
  opacity: 0.92;
}

/* ── Flash Flow: 全局输入区 ──────────────────────────── */
.ff-inputs-card { margin-bottom: 0; }
.ff-inputs-list { 
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
  padding-right: 12px;
}
.ff-input-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  gap: 12px;
  align-items: center;
}
/* 与上方「宏变量」表格同卡片同宽：占满第二列，右缘与表格操作列对齐 */
.ff-input-val-wrap {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.ff-input-key {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.ff-validate-errors {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  background: rgba(211,47,47,0.05);
  border: 1px solid rgba(211,47,47,0.18);
  border-radius: 8px;
}
.ff-err-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--error);
  line-height: 1.5;
}
.ff-err-row .material-symbols-outlined { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* ── Flash Flow: compute 步骤 ────────────────────────── */
.ff-compute-form { display: flex; flex-direction: column; gap: 12px; }
.ff-compute-hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--outline);
}
.ff-compute-hint code { font-size: 10px; color: var(--primary); }
.ff-args-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ff-arg-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ff-arg-name {
  width: 110px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.ff-arg-ref { font-family: var(--font-mono); font-size: 12px; }
.ff-arg-eq {
  font-weight: 700;
  color: var(--outline);
  flex-shrink: 0;
  user-select: none;
}
.ff-args-empty { font-size: 12px; color: var(--outline); padding: 4px 0; }
.ff-builtin-hint {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface-container);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.9;
  color: var(--on-surface-variant);
  font-family: var(--font-mono);
}
.ff-builtin-hint code { color: var(--primary); }
.ff-builtin-demo-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  color: inherit;
}
.ff-builtin-demo-btn code {
  font-size: inherit;
  font-family: inherit;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ff-builtin-demo-btn:hover code {
  color: color-mix(in srgb, var(--primary) 80%, #000);
}

/* ── Flash Flow: 变量徽标（compute 步骤头） ──────────── */
.ff-var-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0,131,143,0.10);
  color: #00838F;
  font-family: var(--font-mono);
  flex-shrink: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Flash Flow: 宏选择器弹窗 ────────────────────────── */
.ff-macro-picker {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 0s linear 140ms;
  will-change: opacity;
  contain: paint;
}
.ff-macro-picker.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 140ms ease;
}
.ff-macro-picker-inner {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  width: 400px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
}
.ff-macro-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}
.ff-macro-list {
  overflow-y: auto;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-macro-group {
  font-size: 10px;
  font-weight: 700;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px 3px;
}
.ff-macro-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s;
}
.ff-macro-item:hover { background: var(--surface-container); }
.ff-macro-item code {
  font-size: 12px;
  color: var(--primary);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.ff-macro-hint {
  font-size: 11px;
  color: var(--outline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Rich Text Input (contenteditable 宏输入框) ──────── */
.ff-rich-input {
  /* 作为 flex item 时自动填满剩余宽度 */
  flex: 1;
  min-width: 0;
  /* 与全局 input/select（.field 内）视觉一致，光标/文本左对齐 */
  display: block;
  box-sizing: border-box;
  height: 40px;
  line-height: 38px;
  padding: 0 12px;
  text-align: left;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  border: none;
  border-bottom: 2px solid var(--outline-variant);
  border-radius: 6px 6px 0 0;
  background: var(--surface-lowest);
  color: var(--on-surface);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  scrollbar-width: none;
  cursor: text;
}
.ff-rich-input::-webkit-scrollbar { display: none; }
.ff-rich-input:focus {
  border-bottom-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 75, 135, 0.07);
  background: #fff;
}
/* 计算/请求下载「输出变量」只读展示：与富文本参数同源 chip，无编辑焦点环 */
.ff-rich-input.ff-output-var-display {
  cursor: default;
  user-select: none;
}
.ff-rich-input.ff-output-var-display:focus {
  border-bottom-color: var(--outline-variant);
  box-shadow: none;
  background: var(--surface-lowest);
  outline: none;
}
/* 占位符：data-empty="true" 时通过 ::before 显示 */
.ff-rich-input[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: rgba(114, 119, 129, 0.4);
  pointer-events: none;
  white-space: nowrap;
  line-height: 38px;
}
/* chip 在 line-height 行内垂直居中 */
.ff-rich-input .ff-macro-chip { vertical-align: middle; }

/* ── 宏 Chip ───────────────────────────────────────── */
.ff-macro-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 18px;
  cursor: default;
  user-select: none;
  flex-shrink: 0;
  vertical-align: middle;
  white-space: nowrap;
}
.ff-macro-chip--input {
  background: #e3f2fd;
  color: #1565C0;
  border: 1px solid #90CAF9;
}
.ff-macro-chip--output {
  background: #e0f2f1;
  color: #00695C;
  border: 1px solid #80CBC4;
}
[data-theme="dark"] .ff-macro-chip--input  { background: #0d2a4a; color: #90CAF9; border-color: #1565C0; }
[data-theme="dark"] .ff-macro-chip--output { background: #0a2724; color: #80CBC4; border-color: #00695C; }

/* ── 文件宏 Chip（橙琥珀色，与变量宏蓝/青区分） ───── */
.ff-file-macro-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 5px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 18px;
  cursor: default;
  user-select: none;
  white-space: nowrap;
  background: #fff3e0;
  color: #E65100;
  border: 1px solid #FFCC80;
}
[data-theme="dark"] .ff-file-macro-chip { background: #2a1800; color: #FFB74D; border-color: #E65100; }

/* ── 文件宏选择器弹窗 ──────────────────────────── */
.ff-file-macro-picker {
  position: fixed;
  inset: 0;
  z-index: 9210;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 0s linear 140ms;
  will-change: opacity;
  contain: paint;
}
.ff-file-macro-picker.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 140ms ease;
}
.ff-file-macro-picker-inner {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  width: 480px;
  max-height: 440px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  overflow: hidden;
  transform: translateY(6px) scale(0.985);
  opacity: 0.98;
  transition: transform 140ms ease, opacity 140ms ease;
}
.ff-file-macro-picker.is-open .ff-file-macro-picker-inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.ff-file-macro-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}
.ff-file-macro-picker-title {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ff-file-macro-picker-title .material-symbols-outlined {
  font-size: 18px;
  color: #E65100;
}
[data-theme="dark"] .ff-file-macro-picker-title .material-symbols-outlined { color: #FFB74D; }
.ff-file-macro-list {
  overflow-y: auto;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-file-macro-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--outline);
}
.ff-file-macro-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s;
}
.ff-file-macro-item:hover { background: var(--surface-container); }
.ff-file-macro-item-icon {
  font-size: 20px;
  color: #E65100;
  flex-shrink: 0;
}
[data-theme="dark"] .ff-file-macro-item-icon { color: #FFB74D; }
.ff-file-macro-item-body { flex: 1; min-width: 0; }
.ff-file-macro-item-name {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--primary);
}
.ff-file-macro-item-path {
  font-size: 11px;
  color: var(--outline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.ff-file-macro-item-remark {
  font-size: 10px;
  color: var(--on-surface-variant);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 宏变量管理卡片 ──────────────────────────────── */
.ff-macros-card { margin-bottom: 12px; }
.ff-macros-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ff-macros-hint-tag {
  font-size: 11px;
  font-weight: 400;
  color: var(--outline);
  margin-left: 8px;
}
.ff-macros-empty {
  font-size: 12px;
  color: var(--outline);
  margin: 4px 0 6px;
  line-height: 1.6;
}
.ff-macros-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ff-macros-table thead th {
  text-align: left;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--outline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--outline-variant);
}
.ff-macros-table tbody tr {
  border-bottom: 1px solid var(--outline-variant);
  transition: background 0.1s;
}
.ff-macros-table tbody tr:last-child { border-bottom: none; }
.ff-macros-table tbody tr:hover { background: var(--surface-container); }
.ff-macros-table td {
  padding: 6px 10px;
  vertical-align: middle;
}
.ff-mv-type-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.ff-mv-type--input  { background: #e8eaf6; color: #3949AB; }
.ff-mv-type--output { background: #e8f5e9; color: #2E7D32; }
[data-theme="dark"] .ff-mv-type--input  { background: #1a1d3a; color: #9fa8da; }
[data-theme="dark"] .ff-mv-type--output { background: #1a2d1a; color: #81c784; }
.ff-mv-remark-cell { color: var(--on-surface-variant, var(--outline)); font-size: 12px; }
.ff-mv-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* 宏变量内联表单 */
.ff-mv-form {
  border-top: 1px solid var(--outline-variant);
  padding-top: 10px;
  margin-top: 8px;
}
.ff-mv-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.ff-mv-form-row td {
  padding: 0;
  background: rgba(0, 75, 135, 0.04);
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: top;
}
.ff-mv-form-row .ff-mv-form {
  border-top: none;
  margin-top: 0;
  padding: 12px 14px;
}
.ff-mv-form-below {
  margin-top: 10px;
}
.ff-mv-form-below .ff-mv-form {
  border-top: 1px solid var(--outline-variant);
  padding-top: 12px;
  margin-top: 0;
}

/* ── 刷写程序：高级配置摘要 chip（不影响原始卡片高度） ───────────── */
.flashp-adv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.flashp-adv-title-row {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.flashp-adv-summary {
  pointer-events: none;
  flex-shrink: 0;
}
.flashp-adv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 88%, var(--outline));
  background: color-mix(in srgb, var(--surface-container) 20%, transparent);
  color: var(--on-surface-variant);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.flashp-adv-chip .material-symbols-outlined {
  font-size: 11px;
  opacity: 0.85;
}
.flashp-adv-chip strong {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: color-mix(in srgb, var(--on-surface) 80%, var(--on-surface-variant));
}
.flashp-adv-chip-sep {
  opacity: 0.5;
}
[data-theme="dark"] .flashp-adv-chip {
  border-color: color-mix(in srgb, var(--outline-variant) 70%, #314050);
  background: color-mix(in srgb, var(--surface-container) 36%, transparent);
}
@media (max-width: 920px) {
  .flashp-adv-summary {
    display: none;
  }
}

/* ── 全局输入区：备注与变量 chip 紧跟为一组，不靠两端撑开 ── */
.ff-input-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  max-width: min(100%, 42vw, 520px);
}
.ff-input-label-primary {
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-chip-sm {
  display: inline-flex;
  align-items: center;
  font-size: 9px !important;
  padding: 0 4px !important;
  line-height: 14px !important;
}

/* 兼容旧 remark span */
.ff-input-remark {
  font-size: 11px;
  color: var(--outline);
}

/* ── 宏选择器：更新后支持 chip 展示 ─────────────── */
.ff-macro-item {
  align-items: center;
}

/* ══ 加密向导弹窗 ══════════════════════════════════════ */
.ff-crypto-wizard {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.28);
}
.ff-crypto-wizard-inner {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  /* visible：避免自定义下拉列表被裁切（依赖 .ff-cw-step 承担纵向滚动） */
  overflow: visible;
}
.ff-crypto-wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 11px;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}
.ff-cw-step {
  padding: 18px 18px 14px;
  overflow-y: auto;
  flex: 1;
}
.ff-cw-hint {
  font-size: 12px;
  color: var(--outline);
  margin: 0 0 14px;
}
.ff-cw-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ff-cw-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 8px 14px;
  border: 1.5px solid var(--outline-variant);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-surface);
  transition: border-color 0.14s, background 0.14s;
  text-align: center;
}
.ff-cw-type-btn small {
  font-size: 10px;
  font-weight: 400;
  color: var(--outline);
}
.ff-cw-type-btn .material-symbols-outlined {
  font-size: 26px;
  color: var(--primary);
}
.ff-cw-type-btn:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.ff-cw-back-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ff-cw-step-title {
  font-weight: 700;
  font-size: 13px;
}
.ff-cw-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ff-cw-macro-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
/* 与步骤内「输出变量 / 参数绑定」等 ff-rich-input 同源：底边线样式 + 40px 行高，避免向导内再写一套边框把 chip 挤到底部 */
.ff-cw-macro-row > input:first-of-type {
  width: 110px;
  flex: 0 0 110px;
  font-family: var(--font-mono);
  height: 40px;
  box-sizing: border-box;
}
.ff-cw-macro-row > input[data-cw-macro-target],
.ff-cw-macro-row .ff-rich-input[data-cw-macro-target] {
  flex: 1 1 auto;
  min-width: 0;
}
.ff-cw-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--outline-variant);
}

/* ── 加密向导按钮（嵌在 field-label 里）──────── */
.ff-crypto-wizard-btn {
  line-height: 1;
}

/* ── compute args：static_value 行样式 ───────── */
.ff-arg-row--static {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 6px;
  padding: 4px 8px;
}
.ff-arg-static-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--primary);
  flex-shrink: 0;
  white-space: nowrap;
}
.ff-arg-static-preview {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--outline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══ Project Preset Dropdown (execute / data / security modules) ════════ */
.proj-preset-wrap {
  position: relative;
}
.proj-preset-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.proj-preset-input-row input {
  flex: 1;
  min-width: 0;
}
.proj-preset-toggle {
  flex-shrink: 0;
  padding: 4px 6px !important;
}
.proj-preset-toggle .material-symbols-outlined {
  transition: transform 0.2s;
}
.proj-preset-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 120;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 4px;
  animation: cfgDropIn 0.15s ease-out;
}
.proj-preset-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--on-surface);
  transition: background 0.12s;
}
.proj-preset-opt:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.proj-preset-opt-id {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--primary);
  flex-shrink: 0;
  min-width: 64px;
}
.proj-preset-opt-remark {
  font-size: 12px;
  color: var(--on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-preset-hint {
  font-size: 11px;
  color: var(--outline);
  margin-top: 4px;
  min-height: 16px;
}
.proj-preset-empty {
  padding: 12px 10px;
  font-size: 12px;
  color: var(--outline);
  text-align: center;
}

/* ══ Misc ══════════════════════════════════════════════ */
.hidden { display: none !important; }
.mica { background: rgba(255,255,255,0.88); backdrop-filter: blur(24px); }
.mica-heavy { background: rgba(255,255,255,0.94); backdrop-filter: blur(40px); }

/* Final scrollbar override */
.proj-wizard-body::-webkit-scrollbar,
.content::-webkit-scrollbar,
.log-panel::-webkit-scrollbar,
.custom-select-options::-webkit-scrollbar,
.ui-select .custom-select-options::-webkit-scrollbar,
.ff-field-dd-options::-webkit-scrollbar,
.cfg-dropdown-list::-webkit-scrollbar,
.proj-preset-list::-webkit-scrollbar,
.ff-preset-list::-webkit-scrollbar,
.dialog-scroll::-webkit-scrollbar,
.ff-steps-list::-webkit-scrollbar,
.ff-cw-step::-webkit-scrollbar,
.ff-rich-input::-webkit-scrollbar,
.proj-dropdown::-webkit-scrollbar,
.ff-macro-list::-webkit-scrollbar,
.ff-file-macro-list::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.proj-wizard-body::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.log-panel::-webkit-scrollbar-thumb,
.custom-select-options::-webkit-scrollbar-thumb,
.ui-select .custom-select-options::-webkit-scrollbar-thumb,
.ff-field-dd-options::-webkit-scrollbar-thumb,
.cfg-dropdown-list::-webkit-scrollbar-thumb,
.proj-preset-list::-webkit-scrollbar-thumb,
.ff-preset-list::-webkit-scrollbar-thumb,
.dialog-scroll::-webkit-scrollbar-thumb,
.ff-steps-list::-webkit-scrollbar-thumb,
.ff-cw-step::-webkit-scrollbar-thumb,
.ff-rich-input::-webkit-scrollbar-thumb,
.proj-dropdown::-webkit-scrollbar-thumb,
.ff-macro-list::-webkit-scrollbar-thumb,
.ff-file-macro-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: rgba(92, 107, 128, 0);
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color 180ms ease, opacity 180ms ease, border-color 180ms ease;
  opacity: 0;
}

/* Project wizard uses a slimmer final scrollbar than the generic panels */
.proj-wizard-overlay .proj-wizard-body {
  -ms-overflow-style: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.proj-wizard-overlay .proj-wizard-body::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
  display: block;
}

.proj-wizard-overlay .proj-wizard-body::-webkit-scrollbar-track {
  background: transparent;
}

.proj-wizard-overlay .proj-wizard-body::-webkit-scrollbar-thumb {
  background-color: rgba(92, 107, 128, 0);
  border: none;
  border-radius: 999px;
  transition: background-color 180ms ease, opacity 180ms ease;
  opacity: 0;
}

.proj-wizard-overlay .proj-wizard-body.scroll-active {
  scrollbar-color: rgba(92, 107, 128, 0.28) transparent;
}

.proj-wizard-overlay .proj-wizard-body.scroll-active::-webkit-scrollbar-thumb {
  background-color: rgba(92, 107, 128, 0.28);
  opacity: 1;
}

.proj-wizard-overlay .proj-wizard-body.scroll-active::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 75, 135, 0.4);
}

/* Macro pickers use the same slim, fading scrollbar treatment as the wizard */
.ff-macro-picker-inner,
.ff-file-macro-picker-inner,
.of-macro-picker-inner {
  position: relative;
}

.ff-macro-picker-inner .proj-wizard-scrollbar,
.ff-file-macro-picker-inner .proj-wizard-scrollbar,
.of-macro-picker-inner .proj-wizard-scrollbar {
  opacity: 0;
}

.ff-macro-picker-inner.scroll-active .proj-wizard-scrollbar,
.ff-file-macro-picker-inner.scroll-active .proj-wizard-scrollbar,
.of-macro-picker-inner.scroll-active .proj-wizard-scrollbar {
  opacity: 1;
}

body.proj-wizard-open .content,
body.proj-wizard-open .slide-panel {
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.proj-wizard-open .content::-webkit-scrollbar,
body.proj-wizard-open .slide-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.proj-wizard-card {
  position: relative;
}

.proj-wizard-overlay .proj-wizard-body {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.proj-wizard-overlay .proj-wizard-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.proj-wizard-scrollbar {
  position: absolute;
  right: 6px;
  width: 4px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 6;
}

.proj-wizard-card.scroll-active .proj-wizard-scrollbar {
  opacity: 1;
}

.proj-wizard-scrollbar.hidden {
  opacity: 0 !important;
}

.proj-wizard-scrollbar-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 999px;
  background: rgba(92, 107, 128, 0.28);
  transition: background-color 180ms ease, transform 80ms linear;
}

.proj-wizard-card.scroll-active .proj-wizard-scrollbar-thumb:hover {
  background: rgba(0, 75, 135, 0.4);
}

/* ══════════════════════════════════════════════════════════════════ */
/* ══ Dark Theme  (Charcoal / Near-Black Palette)  ════════════════ */
/* ══════════════════════════════════════════════════════════════════ */
/*
 * 色阶参考（来自 Material You Dark · Charcoal 变体）：
 *   Background          #0b0e11   — 近纯黑底
 *   Surface-container-low  #1a1c20   — 卡片/输入框底色
 *   Surface-container      #1e2126   — 浮层/面板
 *   Surface-container-high #282a2f   — 高层浮层
 *   Primary             #a3c9ff   — 天蓝亮色（在暗底高对比）
 *   On-surface          #e2e2e6   — 主文本
 *   On-surface-variant  #c2c7d0   — 次文本
 *   Outline             #8c9199   — 描边
 *   Outline-variant     #42474e   — 弱描边
 */

/* ── CSS 变量覆盖 ────────────────────────────────────────────────── */
[data-theme="dark"] {
  --primary:                #a3c9ff;
  --primary-light:          rgba(163, 201, 255, 0.14);
  --primary-hover:          #bad5ff;
  --on-primary:             #003258;
  --surface:                #0b0e11;
  --surface-container:      #1e2126;
  --surface-container-high: #282a2f;
  --surface-lowest:         #1a1c20;
  --on-surface:             #e2e2e6;
  --on-surface-variant:     #c2c7d0;
  --outline:                #8c9199;
  --outline-variant:        #42474e;
  --inverse-surface:        #e2e2e6;
  --inverse-on-surface:     #1a1c1e;
  --error:                  #ffb4ab;
  --error-container:        #93000a;
  --success:                #5dcb90;
  --success-light:          #2e8855;
  --warning:                #e6a030;
  --secondary:              #b4c9d9;
  --secondary-container:    #3e474f;
  --shadow-card:            0 2px 20px rgba(0, 0, 0, 0.50);
  --nav-bg:                 rgba(0, 0, 0, 0.50);
  --nav-text:               #64748b;
  --nav-text-active:        #7dd3fc;
  --nav-accent:             #a3c9ff;
  --scrollbar-thumb:        rgba(140, 145, 153, 0.30);
  --scrollbar-thumb-hover:  rgba(163, 201, 255, 0.40);
}

/* ── App Shell Background ────────────────────────────────────────── */
body {
  background: radial-gradient(circle at 50% -20%, #ffffff 0%, #f0f4f8 50%, #e6eef5 100%);
}
body::after {
  content: "precision_manufacturing";
  font-family: "Material Symbols Outlined";
  position: fixed;
  bottom: 80px;
  right: 80px;
  font-size: 280px;
  color: var(--primary);
  opacity: 0.04;
  z-index: 0;
  pointer-events: none;
  font-variation-settings: "wght" 100;
  user-select: none;
}
#app,
#main-area,
.content,
.gd-shell {
  background: transparent;
}
.login-page-wrap {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] body {
  background: radial-gradient(circle at 50% 0%, #162032 0%, #0b0e11 60%);
}
[data-theme="dark"] body::after {
  color: #ffffff;
  opacity: 0.02;
}

/* ── Appbar ──────────────────────────────────────────────────────── */
[data-theme="dark"] .appbar {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .brand-name {
  background: linear-gradient(135deg, #e0f2fe 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .nav-tab:hover { color: #94a3b8; }
[data-theme="dark"] .nav-tab.active {
  color: #7dd3fc;
  border-bottom-color: #a3c9ff;
  background: rgba(12, 74, 110, 0.35);
}
[data-theme="dark"] .tbtn-tools .material-symbols-outlined {
  color: #7dd3fc;
  opacity: 0.95;
}
[data-theme="dark"] .tbtn-tools.is-open {
  background: rgba(255, 255, 255, 0.12);
  color: #b8d7ff;
}
[data-theme="dark"] .tbtn { color: #64748b; }
[data-theme="dark"] .tbtn:hover { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }
[data-theme="dark"] .tbtn-close:hover { background: #c42b1c; color: #fff; }
[data-theme="dark"] .proj-active-label {
  background: rgba(163, 201, 255, 0.12);
  color: var(--primary);
}
[data-theme="dark"] .proj-dropdown {
  background: #1e2126;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.60);
}
[data-theme="dark"] .proj-dd-item:hover { background: rgba(255, 255, 255, 0.06); }

[data-theme="dark"] .custom-select-options {
  background: #1e2126;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .custom-select-option:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .custom-select-option.selected { background: rgba(163, 201, 255, 0.12); color: var(--primary); }

/* ── Status bar ──────────────────────────────────────────────────── */
[data-theme="dark"] .statusbar {
  background: #000000;
  border-top-color: rgba(255, 255, 255, 0.05);
  color: rgba(186, 213, 255, 0.55);
}
[data-theme="dark"] .login-card-footer {
  background: #000000;
  color: rgba(186, 213, 255, 0.55);
}

/* ── Generic cards ───────────────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .login-card {
  background: var(--surface-lowest);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .card-header { border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .login-header {
  background: linear-gradient(160deg, #1e2126 0%, #1a1c20 100%);
}
[data-theme="dark"] .login-brand-mark {
  box-shadow:
    0 8px 28px rgba(0, 100, 180, 0.35),
    0 0 24px rgba(100, 170, 255, 0.18) !important;
}

/* ── Sub-navigation ──────────────────────────────────────────────── */
[data-theme="dark"] .subnav {
  background: var(--surface-lowest);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .subnav-btn:hover { background: rgba(255, 255, 255, 0.05); }

/* ── Buttons ─────────────────────────────────────────────────────── */
[data-theme="dark"] .btn-primary {
  box-shadow: 0 2px 6px rgba(163, 201, 255, 0.18);
}
[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 4px 12px rgba(163, 201, 255, 0.28);
}
[data-theme="dark"] .btn-outline:hover {
  background: rgba(163, 201, 255, 0.08);
}
[data-theme="dark"] .btn-tonal {
  background: rgba(163, 201, 255, 0.12);
}
[data-theme="dark"] .btn-tonal:hover {
  background: rgba(163, 201, 255, 0.18);
}

/* ── Form inputs ─────────────────────────────────────────────────── */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background: var(--surface-lowest);
  box-shadow: 0 0 0 3px rgba(163, 201, 255, 0.12);
}
[data-theme="dark"] input::placeholder { color: rgba(140, 145, 153, 0.45); }

/* ── Config page (硬件初始化) ────────────────────────────────────── */
[data-theme="dark"] .cfg-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .cfg-card::before {
  background: rgba(24, 27, 32, 0.92);
}
[data-theme="dark"] .cfg-footer {
  border-top-color: rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .cfg-radio-card { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .cfg-info-note {
  background: rgba(0, 74, 119, 0.28);
  color: var(--primary);
}
[data-theme="dark"] .cfg-info-note p { color: #c2c7d0; }

/* ── Global dashboard ───────────────────────────────────────────── */
[data-theme="dark"] .gd-title { color: var(--on-surface); }
[data-theme="dark"] .gd-hero { border-bottom-color: rgba(163, 201, 255, 0.10); }
[data-theme="dark"] .gd-tile {
  background: var(--surface-lowest);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .gd-tile:hover {
  border-color: rgba(163, 201, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38);
}
[data-theme="dark"] .gd-hero-notice {
  background: rgba(163, 201, 255, 0.06);
  border-color: rgba(163, 201, 255, 0.12);
}

/* ── Data table ──────────────────────────────────────────────────── */
[data-theme="dark"] .data-table td { border-bottom-color: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .data-table td[contenteditable]:focus { background: var(--surface-lowest); }

/* ── Log panel ───────────────────────────────────────────────────── */
[data-theme="dark"] .log-panel {
  background: #080a0d;
  border-color: var(--outline-variant);
}
[data-theme="dark"] .log-info { color: #93c4ff; }

/* ── Toast ───────────────────────────────────────────────────────── */
[data-theme="dark"] .toast {
  background: #1e2126;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--on-surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

/* ── Info note ───────────────────────────────────────────────────── */
[data-theme="dark"] .info-note { background: rgba(163, 201, 255, 0.06); }

/* ── Flash Flow step cards ───────────────────────────────────────── */
[data-theme="dark"] .ff-step-card {
  background: var(--surface-lowest);
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .ff-step-card:hover { border-color: rgba(163, 201, 255, 0.20); }
[data-theme="dark"] .ff-step-card--compute {
  background: linear-gradient(180deg, #1f2229 0%, #1a1c20 100%);
  border-color: rgba(0, 188, 200, 0.14);
}
[data-theme="dark"] .ff-step-card--compute:hover { border-color: rgba(0, 188, 200, 0.24); }
[data-theme="dark"] .ff-step-card--compute .ff-step-index {
  background: #252a30;
  color: #5f8090;
}
[data-theme="dark"] .ff-step-card--compute .ff-var-badge {
  background: rgba(0, 188, 200, 0.08);
  color: #4ea8b0;
}
[data-theme="dark"] .ff-step-card--expanded {
  border-color: rgba(163, 201, 255, 0.24);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.40);
}
[data-theme="dark"] .ff-step-card--compute.ff-step-card--expanded {
  border-color: rgba(0, 188, 200, 0.28);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.36);
}
[data-theme="dark"] .ff-add-btn:hover { background: rgba(255, 255, 255, 0.04); }

/* ── Project wizard ──────────────────────────────────────────────── */
[data-theme="dark"] .proj-wizard-scrollbar-thumb { background: rgba(140, 145, 153, 0.28); }
[data-theme="dark"] .proj-wizard-card.scroll-active .proj-wizard-scrollbar-thumb:hover {
  background: rgba(163, 201, 255, 0.38);
}
[data-theme="dark"] .proj-wizard-overlay .proj-wizard-body.scroll-active::-webkit-scrollbar-thumb {
  background-color: rgba(140, 145, 153, 0.28);
}
[data-theme="dark"] .proj-wizard-overlay .proj-wizard-body.scroll-active::-webkit-scrollbar-thumb:hover {
  background-color: rgba(163, 201, 255, 0.38);
}

/* ── Byte dialog ─────────────────────────────────────────────────── */
[data-theme="dark"] .byte-section {
  background: rgba(163, 201, 255, 0.03);
  border-color: rgba(163, 201, 255, 0.10);
}

/* ── KPI cards ───────────────────────────────────────────────────── */
[data-theme="dark"] .kpi-card {
  background: var(--surface-lowest);
  border-color: rgba(255, 255, 255, 0.07);
}

/* ── Preset list ─────────────────────────────────────────────────── */
[data-theme="dark"] .proj-preset-list {
  background: #1e2126;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .proj-preset-opt:hover { background: rgba(255, 255, 255, 0.06); }

/* ── Flash Flow: skip button ─────────────────────────────────────── */
[data-theme="dark"] .ff-skip-btn:hover {
  color: #e08c3a;
  border-color: #e08c3a;
  background: rgba(224, 140, 58, 0.08);
}
[data-theme="dark"] .ff-skip-btn--active {
  color: #e08c3a;
  border-color: rgba(224, 140, 58, 0.35);
  background: rgba(224, 140, 58, 0.09);
}

/* ── Macro table ─────────────────────────────────────────────────── */
[data-theme="dark"] .ff-macros-table thead th { border-bottom-color: var(--outline-variant); }
[data-theme="dark"] .ff-macros-table tbody tr { border-bottom-color: var(--outline-variant); }

/* ── Rich input ──────────────────────────────────────────────────── */
[data-theme="dark"] .ff-rich-input {
  background: var(--surface-lowest);
  border-bottom-color: var(--outline-variant);
}
[data-theme="dark"] .ff-rich-input:focus-within { border-bottom-color: var(--primary); }

/* ── Preset badge / tag ──────────────────────────────────────────── */
[data-theme="dark"] .proj-sec-level-tag {
  background: rgba(163, 201, 255, 0.14);
  color: var(--primary);
}

/* ── Misc section borders ────────────────────────────────────────── */
[data-theme="dark"] .proj-svc-panel { border-color: var(--outline-variant); }
[data-theme="dark"] .proj-dll-table-wrap { border-color: var(--outline-variant); }

/* ── Mica glass helpers ──────────────────────────────────────────── */
[data-theme="dark"] .mica       { background: rgba(30, 33, 38, 0.72); backdrop-filter: blur(32px); }
[data-theme="dark"] .mica-heavy { background: rgba(30, 33, 38, 0.88); backdrop-filter: blur(40px); }

/* ── Macro chips (deep charcoal variants) ────────────────────────── */
[data-theme="dark"] .ff-macro-chip--input  { background: #0d1728; color: #93c4ff; border-color: #1a3a6a; }
[data-theme="dark"] .ff-macro-chip--output { background: #0a1e1c; color: #6dcfca; border-color: #1a4440; }

/* ── Scrollbar in dark ───────────────────────────────────────────── */
[data-theme="dark"] .proj-wizard-overlay .proj-wizard-body.scroll-active {
  scrollbar-color: rgba(140, 145, 153, 0.28) transparent;
}