/* ============================================================
   v2 美术升级：更深的中间色调 / 更高级的卡片与连线
   （追加覆盖之前的浅色样式）
   ============================================================ */
:root {
  --bg: #06080d;
  --bg-2: #090c13;
  --panel: #0f141e;
  --panel-2: #131a26;
  --panel-3: #1a2333;
  --line: #212b3d;
  --line-soft: #1a2231;
  --text: #eaf0fb;
  --muted: #8b99b0;
  --muted-2: #64718a;
  --accent: #31dfb0;
  --accent-soft: rgba(49, 223, 176, 0.14);
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.48);
}

html, body {
  background:
    radial-gradient(1100px 720px at 10% -12%, rgba(94, 82, 255, 0.16) 0%, transparent 55%),
    radial-gradient(900px 680px at 100% 0%, rgba(31, 150, 130, 0.14) 0%, transparent 52%),
    radial-gradient(900px 700px at 50% 110%, rgba(36, 72, 150, 0.12) 0%, transparent 58%),
    var(--bg);
}

.topbar {
  background: linear-gradient(180deg, rgba(20, 26, 39, 0.96) 0%, rgba(12, 16, 24, 0.96) 100%);
  border-color: #263146;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.brand-name { color: #f2f7ff; letter-spacing: 0.2px; }
.brand-sub { color: #6f7d95; }
.topbar .field-label { color: #8593aa; }
.topbar .input {
  background: #0a0f17;
  border-color: #232f43;
  color: #e9f0fb;
}
.topbar .input:hover { border-color: #2e3d57; }
.topbar .btn {
  background: rgba(255, 255, 255, 0.035);
  border-color: #263247;
}
.topbar .btn:hover { background: rgba(255, 255, 255, 0.07); border-color: #35455f; }
.topbar .btn.primary {
  background: linear-gradient(135deg, #34e3b4 0%, #17b98f 100%);
  color: #04120d;
}

.palette, .inspector {
  background: linear-gradient(180deg, rgba(19, 25, 37, 0.96) 0%, rgba(11, 15, 23, 0.96) 100%);
  border-color: #222d40;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.palette-head, .inspector-head { color: #dfe9f7; border-color: #1d2637; }
.palette-search { background: #080c13; border-color: #222d40; }
.palette-tip { color: #64718a; border-color: #1a2231; }

.tile {
  background: linear-gradient(180deg, #161e2c 0%, #111825 100%);
  border-color: #232f43;
}
.tile:hover { background: #1b2536; border-color: rgba(49, 223, 176, 0.55); }
.tile-name { color: #dfe9f7; font-size: 12px; }
.tile:hover .tile-name { color: #b9ffec; }
.tile-short { color: #5f6c83; }

.tile-link {
  border-color: rgba(49, 223, 176, 0.28);
  background: linear-gradient(180deg, rgba(49, 223, 176, 0.10) 0%, rgba(15, 21, 31, 0.9) 100%);
}
.tile-link.skip {
  border-color: rgba(232, 137, 42, 0.4);
  background: linear-gradient(180deg, rgba(232, 137, 42, 0.14) 0%, rgba(15, 21, 31, 0.9) 100%);
}
.tile-link.skip .tile-short { color: #f0a85c; }
.tile-link .tile-short { color: #72e6c6; }

/* 画布：纯白，但加深边框与投影，形成"发光画板"质感 */
.canvas {
  background: #ffffff;
  border: 1px solid #05070b;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(10, 20, 35, 0.04);
}

/* 节点卡片：中间色加深，更有层次 */
.node {
  background: linear-gradient(180deg, #ffffff 0%, var(--node-tint, #eef3f8) 185%);
  border: 1px solid rgba(23, 45, 66, 0.20);
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(13, 22, 38, 0.10), 0 10px 22px rgba(13, 22, 38, 0.05);
  padding: 10px 13px 11px;
}
.node::before {
  width: 5px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(180deg, var(--node-color, #93a4bd) 0%, rgba(255, 255, 255, 0.1) 160%);
  box-shadow: 1px 0 6px rgba(13, 22, 38, 0.12);
  opacity: 0.95;
}
.node:hover {
  border-color: rgba(18, 120, 95, 0.45);
  box-shadow: 0 14px 30px rgba(13, 22, 38, 0.18), 0 0 0 1px rgba(18, 168, 121, 0.18);
}
.node.selected {
  border-color: #16b98c;
  box-shadow: 0 0 0 3px rgba(22, 185, 140, 0.18), 0 14px 30px rgba(13, 22, 38, 0.2);
}
.node-title { color: #0d1e2f; font-size: 12.5px; letter-spacing: 0.1px; }
.node-type { color: #7c8ca2; font-size: 9px; }
.node-summary { color: #3f5270; font-size: 10.5px; }
.node-shape {
  background: rgba(14, 34, 54, 0.07);
  border: 1px solid rgba(14, 34, 54, 0.08);
  color: #22374f;
  font-weight: 600;
  border-radius: 7px;
}
.node.has-error { border-color: #e25656; }

/* 块卡片：深色描边 + 渐变填充 + 内高光，更高级 */
.node.block {
  border-width: 1.5px;
  border-radius: 13px;
  box-shadow: 0 10px 24px rgba(9, 30, 46, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.node.block::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.node.block .block-name {
  color: #0a2233;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.node.block .block-meta { color: #2f4a63; font-size: 9.5px; opacity: 0.85; }
.node.block.circle { border-radius: 50%; }
.node.block.circle::after { inset: 4px; border-radius: 50%; }
.node.block:hover { box-shadow: 0 14px 30px rgba(9, 30, 46, 0.26); }

/* 连线：更深、更利落 */
.edge-path { stroke: #24314a; stroke-width: 1.9; }
.edge-path.edge-skip { stroke: #e8892a; stroke-width: 2.5; }
.edge-path.edge-selected { stroke: #10b386 !important; stroke-width: 2.8; }
.edge-hit { stroke-width: 16; }
.edge-plus { fill: #b45f0d; font-size: 12.5px; }
.edge-g:hover .edge-path:not(.edge-skip) { stroke: #0f9c72; stroke-width: 2.5; }
.edge-g:hover .edge-path.edge-skip { stroke: #f7a94a; stroke-width: 3; }
.edge-temp { stroke: #10b386; stroke-width: 2.2; stroke-dasharray: 7 5; }

/* 连线目标高亮 */
.node.link-target {
  border-color: #10b386 !important;
  box-shadow: 0 0 0 3px rgba(16, 179, 134, 0.22), 0 10px 26px rgba(16, 179, 134, 0.18) !important;
}
.node.link-target .port { opacity: 1; }

/* 框选 & 平移光标 */
.canvas.selecting { cursor: crosshair; }
.canvas.space-pan { cursor: grab; }
.canvas.space-pan:active { cursor: grabbing; }
.marquee {
  border: 1.5px solid rgba(16, 179, 134, 0.9);
  background: rgba(16, 179, 134, 0.10);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* 属性面板细节 */
.insp-title { color: #f0f6ff; }
.insp-sub { color: #6d7b93; }
.insp-shape {
  background: rgba(49, 223, 176, 0.12);
  border: 1px solid rgba(49, 223, 176, 0.18);
  color: #8cf3d4;
}
.insp-section-title { color: #6d7b93; }
.field-row label { color: #97a5bb; }
.field-row input[type="number"], .field-row input[type="text"], .field-row select {
  background: #080d14;
  border-color: #232f43;
}
.statusbar { color: #6d7b93; }
#zoomText { color: #9fb0c7; }
.icon-btn { background: #131a26; border-color: #263247; color: #dbe6f5; }
.icon-btn:hover { background: #1a2434; }

/* 弹窗加深 */
.modal {
  background: linear-gradient(180deg, #121927 0%, #0b1018 100%);
  border-color: #263247;
}
.modal-head, .modal-foot { border-color: #1e2839; }
.code-view { background: #05080d; border-color: #1e2839; color: #cfe0f5; }

/* ===== 控制台风格：底部状态 chips / 设置弹窗 ===== */
.statusbar { height: 34px; }
.status-left { flex-wrap: wrap; gap: 10px; }
.status-config { display: flex; align-items: center; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #222d40;
  color: #90a0b8;
  font-size: 10.5px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.chip .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(49, 223, 176, 0.85);
}
.chip.warn { color: #ffb27a; border-color: rgba(255, 178, 122, 0.3); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.modal-grid .modal-field { margin-bottom: 0; }
#cfgDevice, #cfgTask, #cfgLoss { width: 100%; }

/* 弹窗入场只做位移，保证截图/弱性能环境也是一次就完全不透明 */
.modal { animation: modal-in-v2 0.24s cubic-bezier(.2,.9,.3,1.05) both; }
@keyframes modal-in-v2 {
  from { transform: translateY(12px) scale(0.985); }
  to { transform: none; }
}