/* ============================================================
   宇宙紫 · 俏皮暗色主题（默认）
   参考：深紫星空 + 霓虹粉 / 荧光绿 + 圆角玻璃卡片
   ============================================================ */

/* ---------- 星空背景 ---------- */
.theme-cosmic body {
  background:
    radial-gradient(900px 620px at 85% -10%, rgba(124, 76, 255, 0.35) 0%, transparent 55%),
    radial-gradient(760px 560px at 0% 100%, rgba(255, 92, 190, 0.22) 0%, transparent 55%),
    radial-gradient(700px 520px at 60% 105%, rgba(80, 200, 255, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, #130b26 0%, #0d0819 55%, #120b22 100%);
  color: #ece7ff;
}
.theme-cosmic body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 72%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 47% 32%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 63% 84%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 63%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 6% 55%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.1px 1.1px at 38% 8%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(1.4px 1.4px at 55% 60%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 84% 88%, rgba(255, 255, 255, 0.6), transparent 60%);
  background-size: 520px 420px, 620px 520px, 720px 600px, 560px 480px, 680px 560px, 580px 500px, 640px 540px, 700px 580px, 600px 520px, 660px 560px;
  background-repeat: repeat;
  opacity: 0.75;
  animation: stars-twinkle 6s ease-in-out infinite alternate;
}
@keyframes stars-twinkle {
  0% { opacity: 0.55; }
  100% { opacity: 0.9; }
}
.theme-cosmic body::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px 320px at 22% 18%, rgba(255, 110, 210, 0.18), transparent 65%),
    radial-gradient(520px 380px at 82% 30%, rgba(122, 92, 255, 0.22), transparent 65%),
    radial-gradient(460px 360px at 60% 90%, rgba(90, 220, 200, 0.12), transparent 65%);
  filter: blur(6px);
  animation: nebula-drift 18s ease-in-out infinite alternate;
}
@keyframes nebula-drift {
  0% { transform: translate3d(-1%, -1%, 0) scale(1); }
  100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.04); }
}

/* ---------- 顶部菜单 / 工具栏 ---------- */
.theme-cosmic #app { gap: 8px; padding: 10px 12px 12px; }
.theme-cosmic .ide-menubar {
  background: rgba(30, 20, 56, 0.62);
  border: 1px solid rgba(150, 120, 255, 0.22);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  color: #b7a9e6;
}
.theme-cosmic .ide-menubar .menu-item { color: #b7a9e6; border-radius: 999px; transition: all 0.15s; }
.theme-cosmic .ide-menubar .menu-item:hover { background: rgba(255, 138, 212, 0.16); color: #ffb7e6; }
.theme-cosmic .menubar-title { color: #7d6fa8; }

.theme-cosmic .topbar {
  background: rgba(34, 23, 62, 0.7);
  border: 1px solid rgba(150, 120, 255, 0.25);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(8, 4, 20, 0.5);
  padding: 9px 14px;
}
.theme-cosmic .brand-logo {
  background: linear-gradient(135deg, #ff8ad4 0%, #9a8bff 55%, #6ef0d2 100%);
  color: #1b1030;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(255, 138, 212, 0.35);
}
.theme-cosmic .brand-name { color: #f3edff; }
.theme-cosmic .brand-sub { color: #8d7fbd; }
.theme-cosmic .topbar .field-label { color: #9d90c7; }
.theme-cosmic .input {
  background: rgba(18, 11, 36, 0.85);
  border: 1px solid rgba(150, 120, 255, 0.28);
  color: #ece7ff;
  border-radius: 10px;
}
.theme-cosmic .input:focus { border-color: #c6f96a; box-shadow: 0 0 0 3px rgba(198, 249, 106, 0.18); }

.theme-cosmic .btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(160, 130, 255, 0.28);
  color: #e5ddff;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
}
.theme-cosmic .btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(198, 249, 106, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(154, 139, 255, 0.25);
}
.theme-cosmic .btn.primary {
  background: linear-gradient(135deg, #d6ff7a 0%, #a8f04a 100%);
  border: none;
  color: #1c2410;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(168, 240, 74, 0.35);
}
.theme-cosmic .btn.primary:hover { filter: brightness(1.05); box-shadow: 0 10px 26px rgba(168, 240, 74, 0.45); }
.theme-cosmic .btn.danger-ghost {
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.35);
  color: #ffb3b3;
}

/* ---------- 左右面板 ---------- */
.theme-cosmic .main { background: transparent; gap: 10px; }
.theme-cosmic .palette,
.theme-cosmic .inspector {
  background: rgba(28, 19, 52, 0.72);
  border: 1px solid rgba(150, 120, 255, 0.22);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(8, 4, 20, 0.45);
  overflow: hidden;
}
.theme-cosmic .palette-head,
.theme-cosmic .inspector-head {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(150, 120, 255, 0.18);
  color: #e5ddff;
  padding: 12px 14px 9px;
}
.theme-cosmic .palette-search {
  background: rgba(18, 11, 36, 0.8);
  border: 1px solid rgba(150, 120, 255, 0.25);
  color: #ece7ff;
  border-radius: 10px;
}
.theme-cosmic .palette-search:focus { border-color: #ff9ed8; box-shadow: 0 0 0 3px rgba(255, 158, 216, 0.15); }
.theme-cosmic .palette-group-title { color: #9d90c7; }
.theme-cosmic .palette-group-title::before { content: "✦"; color: #ff9ed8; background: none; }
.theme-cosmic .tile {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(150, 120, 255, 0.18);
  border-radius: 12px;
  transition: transform 0.14s cubic-bezier(.2,.9,.3,1.2), box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.theme-cosmic .tile:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 158, 216, 0.5);
  transform: translateY(-2px) rotate(-0.5deg);
  box-shadow: 0 8px 20px rgba(255, 158, 216, 0.18);
}
.theme-cosmic .tile-name { color: #ece7ff; }
.theme-cosmic .tile-short { color: #8d7fbd; }
.theme-cosmic .tile-link {
  background: rgba(168, 240, 74, 0.10);
  border-color: rgba(168, 240, 74, 0.35);
}
.theme-cosmic .tile-link .tile-short { color: #c6f96a; }
.theme-cosmic .tile-link.skip {
  background: rgba(255, 160, 90, 0.12);
  border-color: rgba(255, 160, 90, 0.4);
}
.theme-cosmic .tile-link.skip .tile-short { color: #ffb066; }
.theme-cosmic .palette-tip {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(150, 120, 255, 0.18);
  color: #8d7fbd;
  font-size: 10px;
  line-height: 1.65;
}

/* ---------- 编辑器标签 ---------- */
.theme-cosmic .editor-tabs {
  background: rgba(28, 19, 52, 0.6);
  border: 1px solid rgba(150, 120, 255, 0.22);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  backdrop-filter: blur(12px);
  height: 32px;
}
.theme-cosmic .editor-tab { color: #8d7fbd; border-right: 1px solid rgba(150, 120, 255, 0.14); }
.theme-cosmic .editor-tab.active {
  background: rgba(22, 14, 42, 0.9);
  color: #f0eaff;
  border-radius: 10px 10px 0 0;
}
.theme-cosmic .editor-tab.active::before {
  background: linear-gradient(90deg, #ff9ed8, #c6f96a);
  height: 3px;
  border-radius: 3px 3px 0 0;
}
.theme-cosmic .editor-tab .file-dot { background: #6ef0d2; box-shadow: 0 0 8px rgba(110, 240, 210, 0.8); }
.theme-cosmic .editor-tab.python .file-dot { background: #ffb86b; box-shadow: 0 0 8px rgba(255, 184, 107, 0.8); }
.theme-cosmic .editor-tabs .tab-hint { color: #8d7fbd; font-size: 10px; }
.theme-cosmic .editor-tabs .spacer { display: block; }

/* ---------- 画布：深紫星空 ---------- */
.theme-cosmic .canvas {
  background-color: #140e28;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.16) 1.1px, transparent 1.1px),
    radial-gradient(circle at 20% 25%, rgba(154, 139, 255, 0.10), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(255, 138, 212, 0.08), transparent 45%);
  background-size: 26px 26px, 100% 100%, 100% 100%;
  border: 1px solid rgba(150, 120, 255, 0.25);
  border-radius: 0 0 18px 18px;
  box-shadow: inset 0 0 80px rgba(90, 60, 180, 0.18), 0 18px 44px rgba(8, 4, 20, 0.55);
}
.theme-cosmic .canvas::after {
  background: radial-gradient(360px 360px at var(--mx, 50%) var(--my, 50%), rgba(198, 249, 106, 0.06), transparent 70%);
}
.theme-cosmic .canvas-title { color: #5f5488; }
.theme-cosmic .marquee {
  border: 2px dashed #c6f96a;
  background: rgba(198, 249, 106, 0.08);
  border-radius: 10px;
}

/* ---------- 节点：深紫玻璃卡片 ---------- */
.theme-cosmic .node {
  background: linear-gradient(180deg, rgba(45, 32, 82, 0.94) 0%, rgba(32, 22, 60, 0.94) 100%);
  border: 1px solid rgba(160, 130, 255, 0.35);
  border-radius: 13px;
  box-shadow: 0 4px 14px rgba(6, 3, 16, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  transition: transform 0.16s cubic-bezier(.2,1.1,.4,1.2), box-shadow 0.18s, border-color 0.15s;
}
.theme-cosmic .node::before {
  width: 5px;
  background: var(--node-color, #8d7fbd);
  border-radius: 5px 0 0 5px;
  box-shadow: 0 0 12px rgba(154, 139, 255, 0.6);
  opacity: 1;
}
.theme-cosmic .node:hover {
  transform: translateY(-2px) rotate(-0.3deg);
  border-color: rgba(198, 249, 106, 0.55);
  box-shadow: 0 10px 26px rgba(8, 4, 20, 0.6), 0 0 20px rgba(154, 139, 255, 0.18);
}
.theme-cosmic .node.selected {
  border-color: #c6f96a;
  box-shadow: 0 0 0 3px rgba(198, 249, 106, 0.18), 0 10px 26px rgba(8, 4, 20, 0.6);
  animation: cosmic-wiggle 2.6s ease-in-out infinite;
}
@keyframes cosmic-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-0.35deg); }
  75% { transform: rotate(0.35deg); }
}
.theme-cosmic .node-title {
  color: #f5f1ff;
  font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}
.theme-cosmic .node-type { color: #8d7fbd; }
.theme-cosmic .node-summary { color: #c3b8e8; }
.theme-cosmic .node-shape {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(160, 130, 255, 0.3);
  color: #ffd9a8;
  border-radius: 7px;
}
.theme-cosmic .node.has-error { border-color: #ff7d7d; }

/* ---------- 块：糖果渐变（深底上很跳） ---------- */
.theme-cosmic .node.block {
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(8, 4, 20, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.theme-cosmic .node.block::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.theme-cosmic .node.block.circle::after { border-radius: 50%; inset: 4px; }
.theme-cosmic .node.block .block-name {
  color: #1d1533;
  font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  font-weight: 800;
}
.theme-cosmic .node.block .block-meta { color: #3c2f5c; opacity: 0.9; }
.theme-cosmic .node.block:hover {
  transform: translateY(-3px) rotate(0.5deg);
  box-shadow: 0 18px 40px rgba(8, 4, 20, 0.6), 0 0 28px rgba(255, 158, 216, 0.22);
}

/* ---------- 端口 / 连线 ---------- */
.theme-cosmic .port {
  background: #1d1433;
  border: 2px solid #a396d6;
}
.theme-cosmic .port:hover {
  border-color: #c6f96a;
  box-shadow: 0 0 0 4px rgba(198, 249, 106, 0.2), 0 0 10px rgba(198, 249, 106, 0.5);
}
.theme-cosmic .edge-path { stroke: #8f84c9; stroke-width: 2; stroke-linecap: round; }
.theme-cosmic .edge-path.edge-skip { stroke: #ffb066; stroke-width: 2.6; }
.theme-cosmic .edge-path.edge-selected { stroke: #c6f96a !important; stroke-width: 3; }
.theme-cosmic .edge-plus { fill: #ffd9a8; }
.theme-cosmic .edge-g:hover .edge-path:not(.edge-skip) { stroke: #c6f96a; stroke-width: 2.6; }
.theme-cosmic .edge-g:hover .edge-path.edge-skip { stroke: #ffc27a; stroke-width: 3; }
.theme-cosmic .edge-temp { stroke: #c6f96a; stroke-width: 2.4; }
.theme-cosmic #arrow path { fill: #8f84c9; }
.theme-cosmic #arrow-skip path { fill: #ffb066; }

/* ---------- 属性面板 ---------- */
.theme-cosmic .insp-title { color: #f5f1ff; }
.theme-cosmic .insp-sub { color: #9d90c7; }
.theme-cosmic .insp-shape {
  background: rgba(198, 249, 106, 0.10);
  border: 1px solid rgba(198, 249, 106, 0.3);
  color: #d6ff7a;
}
.theme-cosmic .insp-section-title { color: #9d90c7; }
.theme-cosmic .field-row { border-radius: 10px; }
.theme-cosmic .field-row:hover { background: rgba(255, 255, 255, 0.04); }
.theme-cosmic .field-row label { color: #b7a9e6; }
.theme-cosmic .field-row input[type="number"],
.theme-cosmic .field-row input[type="text"],
.theme-cosmic .field-row select {
  background: rgba(18, 11, 36, 0.85);
  border: 1px solid rgba(150, 120, 255, 0.28);
  color: #ece7ff;
  border-radius: 9px;
}
.theme-cosmic .field-row input:focus { border-color: #c6f96a; box-shadow: 0 0 0 3px rgba(198, 249, 106, 0.15); }
.theme-cosmic .switch { background: rgba(255, 255, 255, 0.10); border-color: rgba(150, 120, 255, 0.3); }
.theme-cosmic .switch::after { background: #a396d6; }
.theme-cosmic .switch.on { background: rgba(198, 249, 106, 0.25); border-color: rgba(198, 249, 106, 0.6); }
.theme-cosmic .switch.on::after { background: #c6f96a; }
.theme-cosmic .insp-error {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.3);
  color: #ffb3b3;
}

/* ---------- 状态栏 ---------- */
.theme-cosmic .statusbar {
  background: rgba(28, 19, 52, 0.72);
  border: 1px solid rgba(150, 120, 255, 0.22);
  border-radius: 12px;
  color: #9d90c7;
  padding: 0 12px;
  height: 32px;
  backdrop-filter: blur(12px);
}
.theme-cosmic .chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(150, 120, 255, 0.2);
  border-radius: 999px;
  color: #b7a9e6;
}
.theme-cosmic .status-config .chip:nth-child(1) { color: #c6f96a; border-color: rgba(198, 249, 106, 0.3); }
.theme-cosmic .status-config .chip:nth-child(1) .dot { background: #c6f96a; box-shadow: 0 0 8px rgba(198, 249, 106, 0.9); }
.theme-cosmic .status-config .chip:nth-child(2) { color: #d9b8ff; border-color: rgba(217, 184, 255, 0.3); }
.theme-cosmic .status-config .chip:nth-child(3) { color: #ffd9a8; border-color: rgba(255, 217, 168, 0.3); }
.theme-cosmic .status-config .chip:nth-child(4) { color: #8fd4ff; border-color: rgba(143, 212, 255, 0.3); }
.theme-cosmic .status-config .chip:nth-child(5) { color: #ffb7e6; border-color: rgba(255, 183, 230, 0.3); }
.theme-cosmic #zoomText { color: #b7a9e6; }
.theme-cosmic .icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(150, 120, 255, 0.25);
  color: #e5ddff;
  border-radius: 9px;
}
.theme-cosmic .icon-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #c6f96a; }
.theme-cosmic .ide-status-item { color: #7d6fa8; }

/* ---------- 弹窗 ---------- */
.theme-cosmic .modal-mask { background: rgba(8, 4, 20, 0.55); backdrop-filter: blur(6px); }
.theme-cosmic .modal {
  background: linear-gradient(180deg, #241a44 0%, #1a1233 100%);
  border: 1px solid rgba(160, 130, 255, 0.35);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(4, 2, 12, 0.7);
}
.theme-cosmic .modal-head {
  background: transparent;
  border-bottom: 1px solid rgba(150, 120, 255, 0.22);
  color: #f0eaff;
  font-weight: 700;
}
.theme-cosmic .modal-foot {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(150, 120, 255, 0.22);
  border-radius: 0 0 20px 20px;
}
.theme-cosmic .modal-field > label { color: #9d90c7; }
.theme-cosmic .code-view {
  background: #120c24;
  border: 1px solid rgba(150, 120, 255, 0.22);
  border-radius: 12px;
  color: #cfc3f5;
}
.theme-cosmic .shape-option {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(150, 120, 255, 0.22);
  border-radius: 14px;
  color: #b7a9e6;
}
.theme-cosmic .shape-option.active {
  background: rgba(198, 249, 106, 0.12);
  border-color: rgba(198, 249, 106, 0.5);
  color: #d6ff7a;
}
.theme-cosmic .shape-option .shape-preview { border-color: #a396d6; }

/* ---------- 滚动条 ---------- */
.theme-cosmic ::-webkit-scrollbar-thumb { background: #3a2c66; border-radius: 999px; }
.theme-cosmic ::-webkit-scrollbar-thumb:hover { background: #4b3a80; }

/* 去掉画布网格：纯色深空 */
.theme-cosmic .canvas { background-image: radial-gradient(circle at 20% 25%, rgba(154,139,255,0.10), transparent 45%), radial-gradient(circle at 80% 75%, rgba(255,138,212,0.08), transparent 45%); }