/* Flux.ai 2026 深色宇宙 + 荧光绿 + 紫色 CTA */
:root {
  --flux-black: #050505;
  --flux-surface: #111113;
  --flux-card: #161618;
  --flux-elevated: #1c1c1f;
  --flux-border: rgba(255,255,255,0.08);
  --flux-border-strong: rgba(255,255,255,0.14);
  --flux-green: #c8ff4a;
  --flux-green-dim: rgba(200,255,74,0.15);
  --flux-purple: #7c3aed;
  --flux-purple-bright: #9333ea;
  --flux-purple-glow: rgba(124,58,237,0.45);
  --text: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --green: #4ade80;
  --green-bg: rgba(74,222,128,0.12);
  --red: #f87171;
  --red-bg: rgba(248,113,113,0.12);
  --amber: #fbbf24;
  --amber-bg: rgba(251,191,36,0.12);
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --font: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--flux-black);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 导航 — Flux 极简 */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 72px;
  background: transparent;
}
.nav-brand {
  font-weight: 800; font-size: 22px;
  color: var(--flux-green);
  letter-spacing: -0.03em;
  text-shadow: 0 0 24px rgba(200,255,74,0.35);
}

.fw-brand,
.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--flux-green);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-shadow: 0 0 24px rgba(200, 255, 74, 0.35);
  white-space: nowrap;
}

.fw-brand .brand-logo,
.home-brand .brand-logo,
.brand-logo {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}
.nav-right { display: flex; align-items: center; gap: 16px; }
.btn-signup {
  padding: 10px 22px; border-radius: 6px;
  background: transparent;
  border: 1px solid var(--flux-green);
  color: var(--flux-green);
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.btn-signup:hover { background: var(--flux-green-dim); }
.menu-btn {
  background: none; border: none; color: #fff;
  font-size: 22px; cursor: pointer; padding: 4px;
  line-height: 1;
}
.btn-primary {
  padding: 8px 18px; border-radius: 8px; font-size: 13px;
  background: var(--flux-purple-bright); border: none;
  color: #fff; cursor: pointer; font-weight: 600;
  transition: filter .15s, transform .15s;
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Hero — 星空 + 大标题 + Prompt 框 */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 24px 80px;
  text-align: center;
  overflow: hidden;
  background: var(--flux-black);
}
.stars {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.stars .nebula {
  position: absolute; inset: -12%;
  background:
    radial-gradient(ellipse 70% 52% at 50% 38%, rgba(124,58,237,0.42), transparent 64%),
    radial-gradient(ellipse 46% 40% at 74% 58%, rgba(88,28,135,0.48), transparent 60%),
    radial-gradient(ellipse 40% 36% at 20% 68%, rgba(67,20,140,0.32), transparent 58%);
  filter: blur(28px);
  animation: nebula-breathe 12s ease-in-out infinite;
}
.stars .star-far,
.stars .star-mid,
.stars .star-near {
  position: absolute; inset: 0;
}
.stars .star-far {
  background-image: radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 1.5px);
  background-size: 79px 53px;
  animation: star-twinkle 5s ease-in-out infinite alternate;
}
.stars .star-mid {
  background-image: radial-gradient(circle, rgba(232,220,255,0.95) 0 1.2px, transparent 1.9px);
  background-size: 103px 71px;
  background-position: 37px 19px;
  animation: star-twinkle 4s ease-in-out infinite alternate-reverse;
}
.stars .star-near {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 8%, #fff, transparent),
    radial-gradient(2px 2px at 78% 18%, #c8ff4a, transparent),
    radial-gradient(1.4px 1.4px at 44% 12%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 90% 32%, #e9d5ff, transparent),
    radial-gradient(2px 2px at 28% 24%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, #c4b5fd, transparent),
    radial-gradient(1.6px 1.6px at 18% 48%, #fff, transparent),
    radial-gradient(2px 2px at 70% 76%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 8% 80%, #c8ff4a, transparent),
    radial-gradient(1.4px 1.4px at 96% 88%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 52% 52%, #e9d5ff, transparent),
    radial-gradient(1.5px 1.5px at 35% 64%, #fff, transparent);
  background-size: 100% 100%;
  animation: star-twinkle 3.4s ease-in-out infinite alternate;
}
@keyframes nebula-breathe {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes star-twinkle {
  from { opacity: 0.42; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stars .nebula,
  .stars .star-far,
  .stars .star-mid,
  .stars .star-near { animation: none; }
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
}
.hero-title {
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 0 64px rgba(147,51,234,0.28);
}
.hero-sub {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 500; color: var(--text-secondary);
  margin-bottom: 40px;
}
.prompt-box {
  max-width: 780px; margin: 0 auto 32px;
  padding: 28px 32px;
  background: rgba(10,10,12,0.85);
  border: 1px solid var(--flux-purple);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 40px var(--flux-purple-glow), inset 0 0 60px rgba(124,58,237,0.06);
  text-align: left;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.65;
  color: #e4e4e7;
}
.hero-requirements-wrap {
  max-width: 780px; margin: 0 auto 20px;
  text-align: left;
}
.hero-requirements-input {
  width: 100%; min-height: 120px; max-height: 220px;
  padding: 18px 20px; resize: vertical;
  background: rgba(10,10,12,0.85);
  border: 1px solid var(--flux-purple);
  border-radius: var(--radius-lg);
  color: #e4e4e7; font-family: var(--font);
  font-size: clamp(15px, 1.8vw, 18px); line-height: 1.65;
  box-shadow: 0 0 32px var(--flux-purple-glow);
}
.hero-requirements-input:focus {
  outline: none; border-color: var(--flux-purple-bright);
}
.hero-excel-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 0; font-size: 13px; color: var(--text-secondary);
}
.hero-excel-row input[type="file"] { font-size: 12px; max-width: 100%; }
.hero-excel-name { color: var(--flux-green); font-size: 12px; }
.hero-agent-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 780px; margin: 0 auto 16px;
}
.btn-agent-req {
  padding: 16px 20px; border-radius: 10px;
  background: rgba(124,58,237,0.25);
  border: 1px solid rgba(124,58,237,0.55);
  color: #e9d5ff; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: filter .15s;
}
.btn-agent-req:hover { filter: brightness(1.08); }
.btn-agent-req:disabled { opacity: 0.5; cursor: not-allowed; }
.hero-req-status {
  max-width: 780px; margin: 0 auto 16px;
  font-size: 13px; color: var(--text-muted); min-height: 1.2em;
}
.hero-req-status.ok { color: var(--green); }
.hero-req-status.err { color: var(--red); }
.hl { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hl-green { color: #6ee7b7; text-decoration-color: #34d399; }
.hl-purple { color: #c4b5fd; text-decoration-color: #a78bfa; }
.hl-pink { color: #f9a8d4; text-decoration-color: #f472b6; }
.hl-amber { color: #fcd34d; text-decoration-color: #fbbf24; }
.hl-cyan { color: #67e8f9; text-decoration-color: #22d3ee; }
.hero-cta-frame {
  max-width: 780px; margin: 0 auto;
  padding: 20px;
  border: 1px solid rgba(124,58,237,0.5);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,0.4);
}
.btn-flux-cta {
  display: block; width: 100%;
  padding: 18px 32px;
  background: var(--flux-purple-bright);
  color: #fff; font-size: 17px; font-weight: 700;
  border: none; border-radius: 8px;
  cursor: pointer; text-decoration: none;
  letter-spacing: -0.01em;
  transition: filter .15s, transform .15s;
  box-shadow: 0 8px 32px rgba(124,58,237,0.4);
}
.btn-flux-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.hero-stats {
  display: flex; justify-content: center; gap: 48px;
  margin-top: 56px; flex-wrap: wrap;
}
.hero-stat strong {
  display: block; font-size: 36px; font-weight: 800;
  color: #fff; letter-spacing: -0.03em;
}
.hero-stat span { font-size: 13px; color: var(--text-muted); }
.hero-tags {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 32px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.hero-tags span::before { content: "● "; color: var(--flux-green); }

/* 工作流 01-04 */
.workflow-section {
  padding: 80px 40px;
  background: var(--flux-black);
  border-top: 1px solid var(--flux-border);
}
.workflow-section h2 {
  text-align: center; font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 48px;
}
.workflow-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.workflow-card {
  padding: 28px; border-radius: var(--radius-lg);
  background: var(--flux-card);
  border: 1px solid var(--flux-border);
}
.workflow-card .num {
  font-size: 13px; font-weight: 700;
  color: var(--flux-purple-bright); margin-bottom: 12px;
}
.workflow-card h3 {
  font-size: 18px; font-weight: 700; margin-bottom: 8px;
}
.workflow-card p {
  font-size: 14px; color: var(--text-secondary); line-height: 1.6;
}

/* 工作台区 */
.workbench-wrap {
  background: var(--flux-black);
  padding: 48px 32px 80px;
  border-top: 1px solid var(--flux-border);
}
.workbench {
  max-width: 1320px; margin: 0 auto;
}
.workbench-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.workbench-header h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-secondary);
}
.workbench-header .tabs {
  display: flex; gap: 2px;
  background: var(--flux-card);
  border-radius: 8px;
  padding: 4px;
  border: 1px solid var(--flux-border);
}
.workbench-header .tab {
  padding: 8px 16px; border-radius: 6px; font-size: 13px;
  color: var(--text-muted); cursor: pointer; border: none;
  background: transparent; font-weight: 500; transition: all .2s;
  color: var(--text-secondary);
}
.workbench-header .tab.active {
  background: var(--flux-purple-bright); color: #fff;
}
.workbench-frame {
  border: 1px solid rgba(124,58,237,0.45);
  border-radius: var(--radius-xl);
  padding: 3px;
  box-shadow: 0 0 60px rgba(124,58,237,0.15);
}

.app-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
  grid-template-rows: auto minmax(480px, 1fr) auto;
  grid-template-areas:
    "sidebar toolbar toolbar"
    "sidebar main    aside"
    "footer  footer  footer";
  min-height: 680px;
  height: 76vh;
  max-height: 860px;
  border-radius: calc(var(--radius-xl) - 3px);
  background: var(--flux-surface);
  overflow: hidden;
}

.sidebar-left {
  grid-area: sidebar;
  background: var(--flux-card);
  border-right: 1px solid var(--flux-border);
  padding: 16px 10px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}
.sidebar-section { margin-bottom: 20px; }
.sidebar-section h3 {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-muted);
  margin-bottom: 6px; padding: 0 10px;
  text-transform: uppercase;
}
.tree-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 13px; cursor: pointer; color: var(--text-secondary);
  transition: all .12s;
}
.tree-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.tree-item.active {
  background: rgba(124,58,237,0.2);
  color: #c4b5fd; font-weight: 600;
}
.tree-item .icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  background: var(--flux-elevated); border-radius: 4px;
  color: var(--text-muted);
}
.tree-item.active .icon {
  background: rgba(124,58,237,0.35); color: #c4b5fd;
}

.toolbar {
  grid-area: toolbar;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--flux-border);
  background: var(--flux-surface);
}
.toolbar .project-name { font-weight: 700; font-size: 14px; }
.toolbar .chip {
  padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  background: var(--flux-elevated); color: var(--text-secondary);
  border: 1px solid var(--flux-border);
}
.toolbar .spacer { flex: 1; }
.toolbar .bridge-ok {
  font-size: 12px; color: var(--green); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}

.main-area {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: var(--flux-black);
  overflow: hidden;
  min-width: 0; min-height: 0;
}

.panel {
  background: var(--flux-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--flux-border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--flux-border);
  font-size: 12px; color: var(--text-muted);
  background: var(--flux-elevated);
}
.panel-header .title {
  color: var(--text); font-weight: 600; font-size: 13px;
}
.panel-body { flex: 1; overflow: auto; padding: 12px; min-height: 0; }

/* Agent 对话 */
.agent-chat { font-size: 13px; }
.chat-msg { margin-bottom: 12px; }
.chat-msg .label {
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 4px; font-weight: 600;
}
.chat-msg .bubble {
  padding: 10px 14px; border-radius: 12px; line-height: 1.55;
}
.chat-msg.user .bubble {
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.35);
  margin-left: 12px;
}
.chat-msg.agent .bubble {
  background: var(--flux-elevated);
  border: 1px solid var(--flux-border);
}
.agent-tasks {
  margin-top: 10px; padding: 10px;
  background: var(--flux-black);
  border-radius: 8px;
  border: 1px solid var(--flux-border);
  font-family: var(--mono); font-size: 11px;
}
.agent-tasks .task.run { color: #c4b5fd; }
.cite-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; padding: 5px 10px;
  background: var(--amber-bg);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 8px; font-size: 11px;
  color: var(--amber); font-weight: 500;
}
.chat-input-bar {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--flux-border);
  background: var(--flux-elevated);
}
.chat-input-bar input {
  flex: 1; padding: 10px 14px;
  border-radius: 8px; border: 1px solid var(--flux-border-strong);
  background: var(--flux-card); color: var(--text);
  font-size: 13px; outline: none;
  font-family: var(--font);
}
.chat-input-bar input:focus {
  border-color: var(--flux-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2);
}

/* 代码 */
.code-block { font-family: var(--mono); font-size: 11px; line-height: 1.65; }
.code-line { padding: 2px 8px; border-radius: 4px; color: var(--text-secondary); }
.code-line.add { background: var(--green-bg); color: var(--green); }
.code-line.del { background: var(--red-bg); color: var(--red); }
.code-line.ref {
  background: var(--amber-bg); color: var(--amber);
  font-size: 10px; border-left: 2px solid var(--amber);
}

/* 波形 */
.wave-panel .panel-body {
  flex: 1; min-height: 200px;
  display: flex; flex-direction: column;
  padding: 8px;
}
.wave-viewport {
  flex: 1; min-height: 180px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--flux-border);
  background: #0c0c0e;
}
#waveCanvas {
  width: 100%; height: 100%;
  min-height: 180px;
  display: block;
}
.wave-legend {
  display: flex; gap: 14px; padding: 8px 4px 0;
  font-size: 11px; color: var(--text-muted);
}
.wave-legend span::before {
  content: ""; display: inline-block;
  width: 10px; height: 3px; margin-right: 6px;
  vertical-align: middle; border-radius: 1px;
}
.legend-ch1::before { background: #ffd600; }
.legend-ch2::before { background: #34a3ff; }
.legend-logic::before { background: #8cff45; }

.schematic-preview {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 12px;
}
.net-card {
  padding: 12px; border-radius: 10px;
  background: var(--flux-elevated);
  border: 1px solid var(--flux-border);
  transition: border-color .15s;
}
.net-card:hover { border-color: rgba(124,58,237,0.4); }
.net-card .pin {
  color: #c4b5fd; font-family: var(--mono);
  font-weight: 600; font-size: 12px;
}
.net-card .net { color: var(--text); font-size: 12px; margin-top: 4px; }
.net-card .device { color: var(--text-muted); font-size: 11px; margin-top: 4px; }

.sidebar-right {
  grid-area: aside;
  background: var(--flux-card);
  border-left: 1px solid var(--flux-border);
  padding: 14px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}
.side-card {
  background: var(--flux-elevated);
  border: 1px solid var(--flux-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
}
.side-card h4 {
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 10px; font-weight: 600;
  letter-spacing: 0.02em;
}
.pipeline-steps { display: flex; flex-direction: column; gap: 6px; }
.pipe-step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  font-size: 12px; background: var(--flux-black);
  border: 1px solid var(--flux-border);
}
.pipe-step .step-icon {
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.pipe-step.pass .step-icon { background: var(--green-bg); color: var(--green); }
.pipe-step.run .step-icon { background: rgba(124,58,237,0.2); color: #c4b5fd; }
.pipe-step .step-meta { flex: 1; min-width: 0; }
.pipe-step .step-meta strong { display: block; font-size: 12px; color: var(--text); }
.pipe-step .step-meta span { font-size: 10px; color: var(--text-muted); }

.test-case {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; font-size: 12px;
  border-bottom: 1px solid var(--flux-border);
  color: var(--text-secondary);
}
.test-case:last-child { border-bottom: none; }
.test-case .result {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.test-case .result.pass { background: var(--green-bg); color: var(--green); }
.test-case .result.fail { background: var(--red-bg); color: var(--red); }
.test-case .val {
  margin-left: auto; font-family: var(--mono);
  font-size: 11px; color: #c4b5fd; font-weight: 500;
}

.bridge-status {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 10px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
}
.bridge-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
  flex-shrink: 0;
}

.status-bar {
  grid-area: footer;
  display: flex; align-items: center; gap: 16px;
  padding: 8px 20px;
  background: var(--flux-elevated);
  border-top: 1px solid var(--flux-border);
  font-size: 11px; color: var(--text-muted);
  font-family: var(--mono);
  overflow-x: auto;
}
.status-bar .sep { color: var(--flux-border-strong); }
.status-warn { color: var(--amber); }
.status-err { color: var(--red); }

/* 能力区 — Bento + 玻璃拟态 */
.features-section {
  position: relative;
  background: var(--flux-black);
  padding: 100px 40px;
  border-top: 1px solid var(--flux-border);
  overflow: hidden;
}
.features-section::before {
  content: "";
  position: absolute;
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(124,58,237,0.18), transparent 70%);
  pointer-events: none;
}
.features-section .inner { max-width: 1140px; margin: 0 auto; position: relative; z-index: 1; }
.features-section h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  text-align: center; letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: #fff;
}
.features-section .subtitle {
  text-align: center; color: var(--text-secondary);
  font-size: 17px; margin-bottom: 56px;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  border-radius: 16px;
  padding: 26px 24px;
  background: rgba(22,22,24,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .25s, border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,58,237,0.45);
  box-shadow: 0 12px 40px rgba(124,58,237,0.15), 0 0 0 1px rgba(124,58,237,0.2);
}
.feature-card:hover::before { opacity: 1; }
.feature-card.accent-purple::before {
  background: radial-gradient(ellipse at top left, rgba(124,58,237,0.12), transparent 60%);
}
.feature-card.accent-green::before {
  background: radial-gradient(ellipse at top left, rgba(74,222,128,0.1), transparent 60%);
}
.feature-card.accent-amber::before {
  background: radial-gradient(ellipse at top left, rgba(251,191,36,0.1), transparent 60%);
}
.feature-card.accent-cyan::before {
  background: radial-gradient(ellipse at top left, rgba(34,211,238,0.1), transparent 60%);
}
.feature-card.accent-blue::before {
  background: radial-gradient(ellipse at top left, rgba(59,130,246,0.1), transparent 60%);
}
.feature-card .fc-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative; z-index: 1;
}
.feature-card .fc-icon.purple { background: rgba(124,58,237,0.2); box-shadow: 0 0 20px rgba(124,58,237,0.2); }
.feature-card .fc-icon.blue { background: rgba(59,130,246,0.2); box-shadow: 0 0 20px rgba(59,130,246,0.15); }
.feature-card .fc-icon.green { background: rgba(74,222,128,0.15); box-shadow: 0 0 20px rgba(74,222,128,0.15); }
.feature-card .fc-icon.pink { background: rgba(244,114,182,0.15); box-shadow: 0 0 20px rgba(244,114,182,0.15); }
.feature-card .fc-icon.cyan { background: rgba(34,211,238,0.15); box-shadow: 0 0 20px rgba(34,211,238,0.15); }
.feature-card .fc-icon.amber { background: rgba(251,191,36,0.15); box-shadow: 0 0 20px rgba(251,191,36,0.15); }
.feature-card h3 {
  font-size: 17px; font-weight: 700;
  margin-bottom: 8px; letter-spacing: -0.01em;
  position: relative; z-index: 1;
}
.feature-card p {
  flex: 1 1 auto;
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.65; position: relative; z-index: 1;
}
.feature-card .tags {
  margin-top: auto;
  padding-top: 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
  position: relative; z-index: 1;
}
.feature-card .tag {
  font-size: 11px; padding: 5px 11px;
  border-radius: 999px; font-weight: 600;
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1);
}

/* 闭环流水线 — 统一深色 + 色条 */
.loop-section {
  padding: 88px 40px;
  background: var(--flux-surface);
  border-top: 1px solid var(--flux-border);
}
.loop-section .inner { max-width: 1100px; margin: 0 auto; }
.loop-section h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  text-align: center; letter-spacing: -0.02em;
  margin-bottom: 48px;
  color: #fff;
}
.loop-pipeline {
  display: flex;
  align-items: stretch;
  border-radius: 16px;
  border: 1px solid rgba(124,58,237,0.25);
  background: rgba(10,10,12,0.8);
  box-shadow: 0 0 60px rgba(124,58,237,0.08);
  overflow: hidden;
}
.loop-node {
  flex: 1;
  min-width: 0;
  padding: 20px 14px;
  text-align: center;
  font-weight: 700; font-size: 15px;
  color: #fff;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.06);
  position: relative;
  transition: background .2s;
}
.loop-node:last-child { border-right: none; }
.loop-node:hover { background: rgba(255,255,255,0.03); }
.loop-node::after {
  content: "";
  position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 3px; border-radius: 3px 3px 0 0;
}
.loop-node small {
  display: block; font-size: 11px; font-weight: 500;
  color: var(--text-muted); margin-top: 6px;
}
.loop-node.build::after { background: #a78bfa; box-shadow: 0 0 12px rgba(167,139,250,0.6); }
.loop-node.flash::after { background: #fb923c; box-shadow: 0 0 12px rgba(251,146,60,0.6); }
.loop-node.test::after { background: #4ade80; box-shadow: 0 0 12px rgba(74,222,128,0.6); }
.loop-node.debug::after { background: #38bdf8; box-shadow: 0 0 12px rgba(56,189,248,0.6); }
.loop-node.fix::after { background: #f472b6; box-shadow: 0 0 12px rgba(244,114,182,0.6); }
.loop-node.build { background: rgba(124,58,237,0.06); }
.loop-node.flash { background: rgba(251,146,60,0.06); }
.loop-node.test { background: rgba(74,222,128,0.06); }
.loop-node.debug { background: rgba(56,189,248,0.06); }
.loop-node.fix { background: rgba(244,114,182,0.06); }
.loop-recycle {
  display: flex; align-items: center; justify-content: center;
  width: 52px; flex-shrink: 0;
  background: rgba(124,58,237,0.1);
  border-left: 1px solid rgba(255,255,255,0.06);
  color: var(--flux-green);
  font-size: 22px;
}
.loop-mobile-hint {
  text-align: center; margin-top: 16px;
  font-size: 12px; color: var(--text-muted);
}

/* 定价 */
.pricing-section {
  background: var(--flux-card);
  padding: 96px 40px;
}
.pricing-section .inner { max-width: 1080px; margin: 0 auto; }
.pricing-section h2 {
  font-size: 36px; font-weight: 800;
  text-align: center; letter-spacing: -0.03em;
  margin-bottom: 48px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.price-card {
  background: var(--flux-card);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  border: 1px solid var(--flux-border);
  transition: box-shadow .2s;
}
.price-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.price-card.featured {
  border: 2px solid var(--flux-purple-bright);
  box-shadow: 0 8px 32px rgba(124,58,237,0.12);
  position: relative;
}
.price-card.featured::before {
  content: "推荐";
  position: absolute; top: -12px; left: 24px;
  background: var(--flux-purple-bright);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}
.price-card .plan-name {
  font-size: 14px; font-weight: 600; color: var(--text-muted);
}
.price-card .price {
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.03em; margin: 8px 0;
}
.price-card .price span {
  font-size: 14px; font-weight: 500; color: var(--text-muted);
}
.price-card ul {
  list-style: none; margin: 24px 0;
  font-size: 14px; color: var(--text-secondary);
}
.price-card li { padding: 7px 0; }
.price-card li::before { content: "✓ "; color: var(--green); font-weight: 700; }
.price-card .btn-plan {
  width: 100%; padding: 12px; border-radius: 999px;
  font-weight: 600; font-size: 14px; cursor: pointer;
  border: 1px solid var(--flux-border); background: var(--flux-card);
  color: var(--text); transition: background .15s;
}
.price-card .btn-plan:hover { background: var(--flux-black); }
.price-card.featured .btn-plan {
  background: var(--flux-purple-bright); color: #fff; border: none;
}
.price-card.featured .btn-plan:hover { filter: brightness(1.1); }

.footer {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid var(--flux-border);
  background: var(--flux-black);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
}
.footer-icp {
  width: 100%;
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.85;
}
.footer-icp a { color: inherit; text-decoration: none; }
.footer-icp a:hover { color: var(--text-secondary); text-decoration: underline; }
.footer-slim { padding: 18px 24px; }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 180px minmax(0,1fr) 260px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .site-nav { padding: 0 20px; }
  .nav-links { display: none; }
  .hero { padding: 120px 24px 80px; }
  .workbench-wrap { padding: 32px 16px 60px; }
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(480px,1fr) auto auto;
    grid-template-areas:
      "toolbar"
      "sidebar"
      "main"
      "aside"
      "footer";
    height: auto; min-height: 0; max-height: none;
  }
  .sidebar-left { max-height: 140px; border-right: none; border-bottom: 1px solid var(--flux-border); }
  .sidebar-right { max-height: 260px; border-left: none; border-top: 1px solid var(--flux-border); }
  .main-area { grid-template-columns: 1fr; min-height: 480px; }
  .features-section, .loop-section, .pricing-section { padding: 64px 24px; }
  .feature-grid { grid-template-columns: 1fr; }
  .loop-pipeline { flex-direction: column; }
  .loop-node { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .loop-recycle { width: 100%; height: 48px; border-left: none; border-top: 1px solid rgba(255,255,255,0.06); }
  .editor-layout { grid-template-columns: 1fr; }
  .editor-splitter { display: none; }
  .editor-side-right { display: none; }
}

/* ========== 项目编辑全屏界面 ========== */
body.editor-mode .site-nav,
body.editor-mode #landing-view { display: none !important; }
body.editor-mode { overflow: hidden; }

.project-editor {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: var(--flux-black);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.project-editor.is-open {
  opacity: 1; pointer-events: auto;
}

.editor-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 56px;
  border-bottom: 1px solid var(--flux-border);
  background: rgba(8,8,10,0.95);
  flex-shrink: 0;
}
.editor-back {
  background: none; border: 1px solid var(--flux-border);
  color: var(--text-secondary); padding: 8px 14px;
  border-radius: 8px; cursor: pointer; font-size: 13px;
}
.editor-back:hover { border-color: var(--flux-border-strong); color: #fff; }
.editor-title-wrap { flex: 1; min-width: 0; }
.editor-title-wrap h1 {
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-title-wrap p {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.editor-topbar-actions { display: flex; align-items: center; gap: 10px; }
.editor-model-badge {
  font-size: 11px; padding: 5px 10px; border-radius: 999px;
  background: rgba(124,58,237,0.2); color: #c4b5fd;
  border: 1px solid rgba(124,58,237,0.35);
}
.editor-bridge-pill {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--red);
  padding: 6px 12px; border-radius: 999px;
  background: var(--flux-card); border: 1px solid rgba(248, 113, 113, 0.4);
}
.editor-bridge-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
}
.editor-bridge-pill.connected {
  color: var(--green);
  border-color: rgba(16, 185, 129, 0.4);
}
.editor-bridge-pill.connected .dot {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
/* ---- 本机调试环境检测 ---- */
.editor-env-pill {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  background: var(--flux-card); cursor: pointer;
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: filter .15s;
}
.editor-env-pill:hover { filter: brightness(1.25); }
.editor-env-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted);
}
.editor-env-pill[data-state="ok"] { color: var(--green); border-color: rgba(16, 185, 129, 0.4); }
.editor-env-pill[data-state="ok"] .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.editor-env-pill[data-state="missing"] { color: #fdba74; border-color: rgba(251, 146, 60, 0.5); }
.editor-env-pill[data-state="missing"] .dot { background: #fb923c; }
.editor-env-pill[data-state="error"] { color: var(--red); border-color: rgba(248, 113, 113, 0.45); }
.editor-env-pill[data-state="error"] .dot { background: var(--red); }
.editor-env-pill[data-state="checking"] .dot { animation: env-pulse 1s ease-in-out infinite; }
@keyframes env-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.env-modal {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.66);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.env-modal[hidden] { display: none; }
.env-dialog {
  width: min(760px, 100%); max-height: 84vh;
  display: flex; flex-direction: column;
  background: var(--flux-card, #14141a);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.env-dialog-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.env-dialog-hd h3 { margin: 0; font-size: 16px; color: #fff; }
.env-dialog-hd p { margin: 6px 0 0; font-size: 12px; color: var(--text-secondary); }
.env-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.env-close:hover { color: #fff; }
.env-dialog-body { padding: 16px 20px; overflow-y: auto; }
.env-summary {
  font-size: 13px; margin-bottom: 14px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
.env-summary.ok { color: var(--green); background: rgba(16, 185, 129, 0.1); }
.env-summary.bad { color: #fdba74; background: rgba(251, 146, 60, 0.1); }
.env-empty { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.env-empty code {
  background: rgba(255, 255, 255, 0.08); padding: 2px 6px;
  border-radius: 4px; font-size: 12px;
}
.env-list { display: flex; flex-direction: column; gap: 10px; }
.env-item {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}
.env-item.ok { border-color: rgba(16, 185, 129, 0.3); }
.env-item.bad { border-color: rgba(251, 146, 60, 0.42); }
.env-item-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.env-item-name { font-size: 13px; font-weight: 600; color: #fff; }
.env-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.env-badge.ok { color: var(--green); border-color: rgba(16, 185, 129, 0.4); }
.env-badge.bad { color: #fdba74; border-color: rgba(251, 146, 60, 0.5); }
.env-badge.warn { color: var(--text-secondary); border-color: rgba(255, 255, 255, 0.2); }
.env-item-path {
  margin-top: 6px; font-size: 11px; color: var(--text-muted);
  word-break: break-all; font-family: ui-monospace, Consolas, monospace;
}
.env-item-detail { margin-top: 5px; font-size: 12px; color: var(--text-secondary); }
.env-item-hint {
  margin-top: 7px; font-size: 12px; line-height: 1.6; color: #fdba74;
}
/* 目标芯片不一致：需求/原理图 ↔ 连接的芯片 ↔ 工作区工程 —— 阻塞编译下载，要醒目 */
.env-target-block {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  color: #fecaca; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.45);
  font-weight: 600;
}
.env-item-act { margin-top: 10px; display: flex; gap: 10px; align-items: center; }
.env-btn-install,
.env-btn-fix {
  padding: 6px 14px; border-radius: 7px; cursor: pointer;
  background: var(--flux-green); color: #0a0a0a;
  border: none; font-size: 12px; font-weight: 700;
}
.env-btn-install:hover,
.env-btn-fix:hover { filter: brightness(1.06); }
.env-btn-install:disabled,
.env-btn-fix:disabled { opacity: 0.5; cursor: not-allowed; }
.env-upload {
  position: relative; display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 7px; cursor: pointer;
  font-size: 12px; color: #fdba74;
  border: 1px solid rgba(251, 146, 60, 0.5);
}
.env-upload:hover { background: rgba(251, 146, 60, 0.12); }
/* 透明覆盖层必须贴合本行的 label，否则多行会互相抢点击 */
.env-upload input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  opacity: 0; cursor: pointer;
}
.env-plan { margin-bottom: 14px; }
.env-plan-target {
  padding: 12px 14px; border-radius: 10px; margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}
.env-plan-row { display: flex; gap: 12px; font-size: 13px; line-height: 1.9; }
.env-plan-k { flex: 0 0 72px; color: var(--text-muted); }
.env-plan-v { color: #fff; word-break: break-all; }
.env-plan-src { font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.env-plan-link { font-size: 11px; color: var(--flux-green); margin-left: 6px; text-decoration: none; }
.env-plan-link:hover { text-decoration: underline; }
.env-plan-v .env-badge { margin-left: 4px; vertical-align: middle; }
.env-plan-ai {
  margin-bottom: 12px; padding: 10px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.7; color: #c4b5fd;
  background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3);
}
.env-ai-note { color: #c4b5fd; }
.env-detail { margin-top: 6px; }
.env-detail > summary {
  cursor: pointer; font-size: 12px; color: var(--text-muted);
  padding: 6px 0; user-select: none;
}
.env-detail[open] > summary { margin-bottom: 8px; }
.env-item-progress {
  margin-top: 9px; font-size: 12px; color: var(--text-secondary);
  padding: 7px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  word-break: break-all;
}
.env-item-progress.done { color: var(--green); }
.env-dialog-ft {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.env-note { font-size: 11px; color: var(--text-muted); word-break: break-all; }
.env-actions { display: flex; gap: 10px; flex-shrink: 0; }
.btn-env-recheck {
  padding: 7px 14px; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.2); font-size: 12px;
}
.btn-env-recheck:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-env-autofix {
  padding: 7px 16px; border-radius: 7px; cursor: pointer;
  background: var(--flux-green); color: #0a0a0a;
  border: none; font-size: 12px; font-weight: 700;
}
.btn-env-autofix:hover { filter: brightness(1.06); }
.btn-env-autofix:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- 云同步 ---- */
.fw-sync-pill {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: rgba(18, 18, 22, 0.92); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px; color: var(--text-secondary);
  transition: opacity 0.4s ease;
}
.fw-sync-pill[hidden] { display: none; }
.fw-sync-pill.is-faded { opacity: 0.35; }
.fw-sync-pill:hover { opacity: 1; }
.fw-sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.fw-sync-pill[data-tone="ok"] { color: var(--green); border-color: rgba(16, 185, 129, 0.35); }
.fw-sync-pill[data-tone="ok"] .fw-sync-dot { background: var(--green); }
.fw-sync-pill[data-tone="busy"] .fw-sync-dot { background: #60a5fa; animation: fw-sync-blink 1s infinite; }
.fw-sync-pill[data-tone="warn"] { color: #fdba74; border-color: rgba(251, 146, 60, 0.4); }
.fw-sync-pill[data-tone="warn"] .fw-sync-dot { background: #fb923c; }
.fw-sync-pill[data-tone="bad"] { color: var(--red); border-color: rgba(248, 113, 113, 0.4); }
.fw-sync-pill[data-tone="bad"] .fw-sync-dot { background: var(--red); }
@keyframes fw-sync-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.fw-sync-modal { z-index: 1200; }
.fw-sync-check { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.fw-sync-check input { width: 15px; height: 15px; accent-color: var(--flux-green); cursor: pointer; }

.fw-sync-toast {
  position: fixed; left: 50%; bottom: 70px; transform: translate(-50%, 12px);
  z-index: 1300; max-width: min(560px, 88vw);
  padding: 11px 18px; border-radius: 9px;
  background: rgba(18, 18, 22, 0.96); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px; color: #fff; line-height: 1.5;
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
}
.fw-sync-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.fw-sync-toast[data-tone="bad"] { border-color: rgba(248, 113, 113, 0.45); color: #fecaca; }

/* 同项目已在另一标签页编辑：顶部常驻横幅 + 全页只读态 */
.fw-sync-readonly {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1250;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 18px;
  background: rgba(120, 53, 15, 0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(251, 191, 36, 0.5);
  color: #fde68a; font-size: 13px; line-height: 1.5;
}
.fw-sync-readonly .btn-env-recheck { flex: none; padding: 5px 12px; font-size: 12px; }
body.fw-readonly .btn-editor-run,
body.fw-readonly .btn-editor-write { opacity: 0.5; pointer-events: none; }

.btn-editor-run {
  padding: 9px 18px; border-radius: 8px;
  background: var(--flux-green); color: #0a0a0a;
  border: none; font-weight: 700; font-size: 13px; cursor: pointer;
}
.btn-editor-run:hover { filter: brightness(1.05); }
.btn-editor-run:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-editor-write {
  padding: 9px 16px; border-radius: 8px;
  background: transparent; color: var(--flux-green);
  border: 1px solid var(--flux-green); font-weight: 600;
  font-size: 13px; cursor: pointer;
}
.btn-editor-write:hover { background: var(--flux-green-dim); }
.btn-editor-write:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-editor-fix {
  padding: 9px 16px; border-radius: 8px;
  background: rgba(124,58,237,0.25); color: #e9d5ff;
  border: 1px solid rgba(124,58,237,0.5); font-weight: 600;
  font-size: 13px; cursor: pointer;
}
.btn-editor-fix:hover { background: rgba(124,58,237,0.4); }
.btn-editor-fix:disabled { opacity: 0.45; cursor: not-allowed; }
.editor-workspace-select {
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--flux-border);
  background: var(--flux-card); color: var(--text-secondary);
  font-size: 12px; max-width: 180px;
}
.btn-editor-build {
  padding: 9px 14px; border-radius: 8px;
  background: rgba(59,130,246,0.25); color: #93c5fd;
  border: 1px solid rgba(59,130,246,0.45); font-weight: 600;
  font-size: 12px; cursor: pointer;
}
.btn-editor-build:hover { background: rgba(59,130,246,0.4); }
.btn-editor-build:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-editor-flash {
  padding: 9px 14px; border-radius: 8px;
  background: rgba(251,191,36,0.2); color: #fcd34d;
  border: 1px solid rgba(251,191,36,0.45); font-weight: 600;
  font-size: 12px; cursor: pointer;
}
.btn-editor-flash:disabled { opacity: 0.45; cursor: not-allowed; }

.editor-layout {
  --fw-left-w: 340px;
  --fw-right-w: 280px;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--fw-left-w) 8px minmax(280px, 1fr) 8px var(--fw-right-w);
  gap: 0;
  overflow: hidden;
}

.editor-side {
  background: var(--flux-surface);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
}
.editor-side-right {
  border-right: none;
}

.editor-splitter {
  position: relative;
  z-index: 6;
  width: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
.editor-splitter::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background: var(--flux-border);
}
.editor-splitter::after {
  content: "";
  position: absolute;
  inset: 0 -5px;
}
.editor-splitter-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 44px;
  border-radius: 99px;
  background: rgba(200, 255, 74, 0.42);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.editor-splitter:hover::before,
.editor-splitter:focus-visible::before,
.editor-splitter.is-dragging::before {
  left: 2px;
  width: 3px;
  background: var(--flux-green);
  box-shadow: 0 0 12px rgba(200, 255, 74, 0.45);
}
.editor-splitter:hover .editor-splitter-grip,
.editor-splitter:focus-visible .editor-splitter-grip,
.editor-splitter.is-dragging .editor-splitter-grip {
  background: var(--flux-green);
  box-shadow: 0 0 10px rgba(200, 255, 74, 0.55);
}
.editor-splitter:focus-visible {
  outline: none;
}
body.is-col-resizing {
  cursor: col-resize;
  user-select: none;
}
body.is-col-resizing textarea,
body.is-col-resizing input,
body.is-col-resizing iframe {
  pointer-events: none;
}
.editor-side h3 {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary); margin-bottom: 10px;
}
.editor-side .side-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.editor-tree-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; color: var(--text-secondary);
  cursor: pointer; margin-bottom: 2px;
}
.editor-tree-item:hover { background: rgba(255,255,255,0.04); color: #fff; }
.editor-tree-item.active {
  background: rgba(124,58,237,0.15);
  color: #fff; border: 1px solid rgba(124,58,237,0.25);
}
.editor-tree-item .badge {
  font-size: 10px; font-weight: 700; width: 20px; text-align: center;
  color: var(--flux-green);
}

.editor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--flux-black);
}

.editor-prompt-card {
  flex-shrink: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--flux-border);
  background: rgba(124,58,237,0.06);
}
.editor-prompt-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 8px;
}
.editor-prompt-input {
  width: 100%; min-height: 72px; max-height: 120px;
  padding: 12px 14px; resize: vertical;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(124,58,237,0.4);
  border-radius: 10px; color: #e4e4e7;
  font-family: var(--font); font-size: 14px; line-height: 1.6;
}
.editor-prompt-input:focus {
  outline: none; border-color: var(--flux-purple-bright);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2);
}

.editor-content-tabs {
  flex-shrink: 0;
  display: flex; gap: 4px; padding: 12px 20px 0;
  border-bottom: 1px solid var(--flux-border);
}
.editor-content-tab {
  padding: 8px 16px; border: none; background: none;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; border-radius: 8px 8px 0 0;
}
.editor-content-tab.active {
  color: #fff; background: var(--flux-card);
  border: 1px solid var(--flux-border); border-bottom: none;
}

.editor-ai-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.editor-ai-empty {
  text-align: center; padding: 48px 24px;
  color: var(--text-muted); font-size: 14px;
}
.editor-ai-loading {
  display: flex; align-items: center; gap: 12px;
  padding: 20px; color: var(--text-secondary); font-size: 14px;
}
.editor-ai-loading .spinner {
  width: 20px; height: 20px; border: 2px solid var(--flux-border);
  border-top-color: var(--flux-purple-bright);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fw-think {
  display: none;
  margin: 0 0 8px;
  border: 1px solid var(--flux-border);
  border-radius: 12px;
  /* 思考面板是 sticky 悬浮在流式正文之上的：背景必须不透明，否则正文滚到下面会透出来叠成一团 */
  background:
    linear-gradient(180deg, rgba(124, 92, 255, 0.10), rgba(124, 92, 255, 0.02)),
    var(--flux-surface);
  overflow: hidden;
}
.fw-think.is-on {
  display: block;
  position: sticky;
  top: 0;
  z-index: 6;
  flex: 0 0 auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.fw-think-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
}
.fw-think-spinner {
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px;
  border: 2px solid var(--flux-border);
  border-top-color: var(--flux-purple-bright);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.fw-think.is-done .fw-think-spinner { display: none; }
.fw-think-copy { flex: 1 1 auto; min-width: 0; }
.fw-think-title {
  color: #fff; font-size: 14px; font-weight: 600;
}
.fw-think-meta {
  margin-top: 4px; color: var(--text-secondary); font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.fw-think-toggle {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--flux-border);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.fw-think-toggle:hover { color: #fff; border-color: var(--flux-purple-bright); }
.fw-think-body {
  margin: 0;
  max-height: 280px;
  overflow: auto;
  padding: 0 14px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  color: #c4b5fd;
}
.fw-think.is-collapsed .fw-think-body { display: none; }

.editor-ai-body {
  font-size: 14px; line-height: 1.75; color: #d4d4d8;
}
.editor-ai-body h2, .editor-ai-body h3 {
  color: #fff; margin: 20px 0 10px; font-size: 16px;
}
.editor-ai-body p { margin-bottom: 12px; }
.editor-ai-body ul, .editor-ai-body ol {
  margin: 8px 0 16px 20px;
}
.editor-ai-body li { margin-bottom: 6px; }
.editor-ai-body pre {
  background: #0d0d0f; border: 1px solid var(--flux-border);
  border-radius: 10px; padding: 14px 16px; margin: 12px 0;
  overflow-x: auto; font-family: var(--mono); font-size: 12px;
  line-height: 1.5; color: #a5f3fc;
}
.editor-ai-body code {
  font-family: var(--mono); font-size: 12px;
  background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px;
}
.editor-ai-body strong { color: #fff; }

.editor-error-banner {
  flex-shrink: 0;
  margin: 0 20px 12px; padding: 12px 16px;
  background: var(--red-bg); border: 1px solid rgba(248,113,113,0.35);
  border-radius: 10px; color: var(--red); font-size: 13px;
}

.editor-followup {
  flex-shrink: 0;
  padding: 12px 20px; border-top: 1px solid var(--flux-border);
  display: flex; flex-direction: column; gap: 10px; background: var(--flux-surface);
}
.editor-followup .fw-file-inline {
  display: block;
  margin: 0;
}
.editor-followup .fw-file-inline .fw-file-caption {
  font-size: 12px;
  margin-bottom: 4px;
}
.editor-followup .fw-file-inline input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  width: 100%;
  height: 100%;
}
.editor-followup-row {
  display: flex;
  gap: 10px;
}
.editor-followup-row input {
  flex: 1; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--flux-border); background: var(--flux-card);
  color: #fff; font-size: 14px;
}
.editor-followup-row input:focus {
  outline: none; border-color: var(--flux-purple-bright);
}
.editor-followup-row button {
  padding: 12px 20px; border-radius: 10px;
  background: var(--flux-purple-bright); color: #fff;
  border: none; font-weight: 600; cursor: pointer;
}
.editor-followup-row button:disabled { opacity: 0.5; }

.editor-side-card {
  background: var(--flux-card); border: 1px solid var(--flux-border);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.editor-side-card h4 {
  font-size: 12px; font-weight: 700; margin-bottom: 10px;
}
.editor-task {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text-secondary);
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.editor-task:last-child { border-bottom: none; }
.editor-task .icon { color: var(--flux-green); flex-shrink: 0; }
.editor-task.pending .icon { color: var(--text-muted); }
.editor-task.run .icon { color: var(--amber); }
.editor-task.warn .icon { color: #f59e0b; }
.editor-task.warn { color: #fde68a; }
.editor-pipeline-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 6px 0; color: var(--text-muted);
}
.editor-pipeline-step.done { color: var(--green); }
.editor-pipeline-step.active { color: #fff; }
.editor-build-status {
  flex-shrink: 0;
  margin: 0 20px 8px;
  padding: 10px 14px;
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid var(--flux-border);
  background: var(--flux-surface);
}
.editor-build-status.is-visible { display: flex; }
.editor-build-status.is-running {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.08);
  color: #fcd34d;
}
.editor-build-status.is-ok {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.08);
  color: var(--green);
}
.editor-build-status.is-err {
  border-color: rgba(248, 113, 113, 0.45);
  background: var(--red-bg);
  color: var(--red);
}
.editor-build-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}
.editor-build-status.is-running .editor-build-status-dot {
  animation: build-pulse 1.2s ease-in-out infinite;
}
@keyframes build-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
.editor-build-log {
  flex-shrink: 0;
  margin: 0 20px 12px; max-height: 120px; overflow-y: auto;
  padding: 10px 12px; font-family: var(--mono); font-size: 11px;
  line-height: 1.5; color: var(--text-muted);
  background: #0a0a0c; border: 1px solid var(--flux-border);
  border-radius: 8px;
}
.editor-build-log.is-live {
  max-height: 200px;
  border-color: rgba(251, 191, 36, 0.35);
}
.editor-build-log .line-ok { color: var(--green); }
.editor-build-log .line-err { color: var(--red); }
.editor-build-log .line-warn { color: #fcd34d; }
.editor-build-log .line-info { color: var(--text-muted); }
.fr-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 10px;
}
.fr-toolbar button {
  font-size: 11px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--flux-border); background: var(--flux-card);
  color: #fff; cursor: pointer;
}
.fr-toolbar-meta { font-size: 11px; color: var(--text-muted); }
.fr-list, .loop-matrix { margin: 8px 0 16px; }
.fr-item, .loop-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--flux-border);
  border-radius: 8px; margin-bottom: 6px; font-size: 12px;
}
.fr-item.frozen { border-color: rgba(52, 211, 153, 0.4); }
.fr-item button, .loop-toolbar button {
  font-size: 11px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--flux-border); background: var(--flux-card);
  color: #fff; cursor: pointer;
}
.pin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0 16px;
}
.pin-table th, .pin-table td {
  border: 1px solid var(--flux-border);
  padding: 5px 7px;
  text-align: left;
}
.pin-table th { color: var(--text-muted); font-weight: 600; }
.pin-table tr.pin-confirmed td:last-child { color: var(--green); }
.pin-table tr.pin-conflict td:last-child { color: var(--red); }
.pin-table tr.pin-pending td:last-child,
.pin-table tr.pin-netlist_only td:last-child { color: var(--amber); }
.pin-conflicts { font-size: 12px; color: var(--text-secondary); margin: 0 0 16px 18px; }
.part-list { margin: 8px 0 16px; }
.part-card {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--flux-border);
  border-radius: 8px; margin-bottom: 6px; font-size: 12px;
}
.part-card.frozen { border-color: rgba(52, 211, 153, 0.4); }
.part-card button {
  font-size: 11px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--flux-border); background: var(--flux-card);
  color: #fff; cursor: pointer;
}
.part-card .muted { color: var(--text-muted); margin-top: 4px; }
.part-card ul { margin: 6px 0 0 16px; color: var(--text-secondary); }
.build-errors { margin: 8px 0 16px 18px; font-size: 12px; color: var(--red); }
.loop-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 10px;
}
.loop-toolbar button.primary {
  background: rgba(52, 211, 153, 0.2); border-color: rgba(52, 211, 153, 0.45);
}
.loop-setpoint {
  font-size: 12px; color: var(--text-secondary);
  padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid var(--flux-border); border-radius: 8px;
}
.loop-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.loop-step {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--text-muted);
}
.loop-step.done { color: var(--green); background: rgba(52, 211, 153, 0.12); }
.loop-step.active { color: #fcd34d; background: rgba(251, 191, 36, 0.12); }
.loop-step.fail { color: var(--red); background: rgba(248, 113, 113, 0.12); }
.flash-gate {
  margin: 0 20px 8px; padding: 10px 12px; font-size: 12px;
  border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 8px;
  background: rgba(251, 191, 36, 0.08); color: #fcd34d;
  display: none;
}
.flash-gate.is-visible { display: block; }
.editor-tree-item.muted-file { color: var(--text-muted); font-size: 12px; }
.editor-tree-item .file-layer {
  font-size: 10px; font-weight: 700; width: 20px; text-align: center;
  color: var(--flux-green); flex-shrink: 0;
}
.editor-tree-item .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.editor-code-view {
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  color: #a5f3fc; white-space: pre-wrap;
}
.editor-code-view .file-head {
  font-size: 11px; color: var(--text-muted); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--flux-border);
}

.schematic-ingest-card label.fw-file,
.local-req-card label.fw-file {
  display: block;
  margin-bottom: 10px;
}
.schematic-ingest-card input[type="file"],
.local-req-card input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  width: 100%;
  height: 100%;
}

.fw-file-caption {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.fw-file-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  cursor: pointer;
}
.fw-file-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.fw-file-btn svg {
  width: 20px;
  height: 20px;
}
.fw-file-btn.tone-req {
  background: linear-gradient(135deg, rgba(200, 255, 74, 0.18), rgba(251, 146, 60, 0.2));
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.5);
}
.fw-file-btn.tone-excel {
  background: rgba(200, 255, 74, 0.16);
  color: #c8ff4a;
  border-color: rgba(200, 255, 74, 0.45);
}
.fw-file-btn.tone-spec {
  background: rgba(251, 146, 60, 0.16);
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.45);
}
.fw-file-btn.tone-net {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
}
.fw-file-btn.tone-sch {
  background: rgba(167, 139, 250, 0.16);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.45);
}
.fw-file-btn.tone-pdf {
  background: rgba(248, 113, 113, 0.16);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
}
.fw-file-btn.tone-book {
  background: rgba(103, 232, 249, 0.14);
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.4);
}
.fw-file-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  word-break: break-all;
}
.fw-file-name.has-file {
  color: var(--flux-green);
}
.fw-file-row:hover .fw-file-btn {
  filter: brightness(1.15);
}
.schematic-ingest-card .field-row {
  margin-bottom: 8px;
}
.schematic-ingest-card .field-row input[type="text"] {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--flux-border); background: var(--flux-black);
  color: #fff; font-size: 13px;
}
.schematic-ingest-actions {
  display: flex; gap: 6px; margin-top: 10px;
}
.schematic-ingest-actions button {
  flex: 1; padding: 8px 6px; border-radius: 8px;
  border: 1px solid var(--flux-border); background: var(--flux-elevated);
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.schematic-ingest-actions button.primary {
  background: rgba(124,58,237,0.35); color: #fff;
  border-color: rgba(124,58,237,0.5);
}
.schematic-ingest-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-parts-learn-secondary {
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px dashed var(--flux-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-parts-learn-secondary:hover {
  color: #fff;
  border-color: rgba(124, 58, 237, 0.45);
}
.btn-parts-learn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.parts-missing {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(251, 146, 60, 0.45);
  background: rgba(251, 146, 60, 0.08);
}
.parts-missing[hidden] { display: none !important; }
.parts-missing-hd strong {
  display: block;
  color: #fdba74;
  font-size: 13px;
}
.parts-missing-hd span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.45;
}
.parts-missing-row {
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.parts-missing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  font-size: 12px;
}
.parts-missing-row .mpn { color: #fff; font-weight: 700; }
.parts-missing-row .des,
.parts-missing-row .cat { color: var(--text-secondary); }
.parts-missing-row .err {
  margin-top: 4px;
  color: #fda4af;
  font-size: 11px;
  line-height: 1.4;
}
.parts-missing-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: #fdba74;
  cursor: pointer;
  /* 本列表在 .schematic-ingest-card 内，会被那条卡片级规则改成 absolute 透明覆盖层。
     每行必须自建定位上下文，否则所有行的 input 都相对 #project-editor 堆在同一处，
     点任意一行都会落到最后一行，手册被挂到错误的器件上。 */
  position: relative;
}
.parts-missing-file input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
  cursor: pointer;
}
.btn-parts-import {
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(251, 146, 60, 0.55);
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 60%, #f59e0b 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.btn-parts-import:hover { filter: brightness(1.06); }
.btn-parts-import:disabled { opacity: 0.5; cursor: not-allowed; }
.parts-missing-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.08);
}
.parts-missing-banner p { margin: 0 0 8px; color: #fdba74; }
.parts-missing-banner ul { margin: 0; padding-left: 18px; color: var(--text-secondary); }

/* 编译面板：Keil 缺器件包 / 缺芯片文件 → 自动装 / 上传 / 手动加入指引 */
.support-missing-banner { margin: 0 0 16px; }
.support-missing-item {
  padding: 10px 0 12px;
  border-top: 1px solid rgba(251, 146, 60, 0.25);
}
.support-missing-item:first-of-type { border-top: none; padding-top: 4px; }
.support-missing-item .env-item-name { color: #fff; font-size: 13px; font-weight: 600; }
.support-missing-item code {
  display: block; margin-top: 6px; font-size: 11px; color: var(--text-muted);
  word-break: break-all; font-family: ui-monospace, Consolas, monospace;
}
.support-missing-item ol { margin: 8px 0 0; padding-left: 20px; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.support-missing-item .env-item-act { flex-wrap: wrap; }
.support-missing-item a.env-plan-link { margin-left: 0; font-size: 12px; }
.env-manual-pack {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px dashed rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.05);
}
.env-manual-pack .env-item-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.env-manual-pack .env-item-name { font-size: 13px; color: #fff; }
.env-manual-pack .env-upload:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.schematic-status {
  margin-top: 8px; font-size: 13px; color: var(--text-muted); line-height: 1.5;
}
.schematic-status.ok { color: var(--green); }
.schematic-status.warn { color: #fdba74; }
.schematic-status.err { color: var(--red); }

/* 长内容区域滚动条（深色主题可见） */
.editor-ai-panel,
.editor-side,
.panel-body,
.sidebar-left,
.sidebar-right {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.28) rgba(255,255,255,0.06);
}
.editor-ai-panel::-webkit-scrollbar,
.editor-side::-webkit-scrollbar,
.panel-body::-webkit-scrollbar,
.sidebar-left::-webkit-scrollbar,
.sidebar-right::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.editor-ai-panel::-webkit-scrollbar-track,
.editor-side::-webkit-scrollbar-track,
.panel-body::-webkit-scrollbar-track,
.sidebar-left::-webkit-scrollbar-track,
.sidebar-right::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
}
.editor-ai-panel::-webkit-scrollbar-thumb,
.editor-side::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb,
.sidebar-left::-webkit-scrollbar-thumb,
.sidebar-right::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.28);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.editor-ai-panel::-webkit-scrollbar-thumb:hover,
.editor-side::-webkit-scrollbar-thumb:hover,
.panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.42);
  background-clip: padding-box;
}