粒子属性调整

src/views/CurveEditor.vue

@@ -1,29 +1,39 @@
 <template>
   <div class="ce">
-    <svg ref="svg" class="ce-svg" @dblclick="onDbl">
-      <!-- 网格线(0.25/0.5/0.75) -->
-      <g class="ce-grid">
-        <line v-for="g in [0.25,0.5,0.75]" :key="'v'+g" :x1="px(g)" y1="0" :x2="px(g)" :y2="py(0)" />
-        <line v-for="g in [0.25,0.5,0.75]" :key="'h'+g" x1="0" :y1="py(g)" :x2="px(1)" :y2="py(g)" />
-      </g>
-      <rect :x="px(0)" :y="py(1)" :width="px(1)-px(0)" :height="py(0)-py(1)" class="ce-frame" fill="none" />
-      <!-- 折线 -->
-      <polyline :points="polyPoints" class="ce-line" fill="none" />
-      <!-- 节点:可见圈 r=5 + 命中圈 r=9 -->
-      <g v-for="(pt,i) in pts" :key="i">
-        <circle :cx="px(pt.x)" :cy="py(pt.y)" r="5" class="ce-node" />
-        <circle :cx="px(pt.x)" :cy="py(pt.y)" r="9" class="ce-hit"
-          @pointerdown="onNodeDown($event,i)" @dblclick="onNodeDbl(i,$event)" />
-      </g>
-    </svg>
-    <div class="ce-nav"><span class="ce-tip">双击空白新建·双击节点删除·拖动节点调整</span></div>
+    <div class="ce-editor">
+      <svg ref="svg" class="ce-svg" @dblclick="onDbl">
+        <!-- 网格线(0.25/0.5/0.75) -->
+        <g class="ce-grid">
+          <line v-for="g in [0.25,0.5,0.75]" :key="'v'+g" :x1="px(g)" y1="0" :x2="px(g)" :y2="py(0)" />
+          <line v-for="g in [0.25,0.5,0.75]" :key="'h'+g" x1="0" :y1="py(g)" :x2="px(1)" :y2="py(g)" />
+        </g>
+        <rect :x="px(0)" :y="py(1)" :width="px(1)-px(0)" :height="py(0)-py(1)" class="ce-frame" fill="none" />
+        <!-- 折线 -->
+        <polyline :points="polyPoints" class="ce-line" fill="none" />
+        <!-- 节点:可见圈 r=5 + 命中圈 r=9 -->
+        <g v-for="(pt,i) in pts" :key="i">
+          <circle :cx="px(pt.x)" :cy="py(pt.y)" r="5" class="ce-node" />
+          <circle :cx="px(pt.x)" :cy="py(pt.y)" r="9" class="ce-hit"
+            @pointerdown="onNodeDown($event,i)" @dblclick="onNodeDbl(i,$event)" />
+        </g>
+      </svg>
+      <div class="ce-nav"><span class="ce-tip">双击空白新建·双击节点删除·拖动节点调整</span></div>
+    </div>
+    <button class="ce-reset" type="button" title="恢复默认曲线" @click="resetCurve">重置</button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-const props = defineProps<{ modelValue: { x: number; y: number }[] }>()
+type CurvePoint = { x: number; y: number }
+
+const props = withDefaults(defineProps<{
+  modelValue: CurvePoint[]
+  defaultValue?: CurvePoint[]
+}>(), {
+  defaultValue: () => [{ x: 0, y: 0 }, { x: 1, y: 1 }],
+})
 const emit = defineEmits<{ (e: 'update:modelValue', v: { x: number; y: number }[]): void }>()
 
 const svg = ref<SVGSVGElement | null>(null)
@@ -49,6 +59,10 @@ function normalized(): { x: number; y: number }[] {
 }
 function set(v: { x: number; y: number }[]) { emit('update:modelValue', [...v].sort((a, b) => a.x - b.x)) }
 
+function resetCurve() {
+  set(props.defaultValue.map((point) => ({ ...point })))
+}
+
 const pts = computed(() => normalized())
 const polyPoints = computed(() => pts.value.map(p => `${px(p.x)},${py(p.y)}`).join(' '))
 
@@ -121,7 +135,13 @@ onUnmounted(() => { ro?.disconnect() })
 </script>
 
 <style scoped>
-.ce { width: 100%; }
+.ce { display: flex; align-items: flex-start; gap: 6px; width: 100%; }
+.ce-editor { flex: 1; min-width: 0; }
+.ce-reset {
+  flex: 0 0 auto; padding: 5px 7px; border: 1px solid #3b4b65; border-radius: 5px;
+  background: #242f42; color: #c4cee2; font-size: 10px; cursor: pointer;
+}
+.ce-reset:hover { border-color: #7774ff; background: #4f4dc2; color: #fff; }
 .ce-svg { width: 100%; height: 110px; display: block; border: 1px solid #2a2a3c; border-radius: 6px; background: #10101a; cursor: crosshair; touch-action: none; }
 .ce-grid line { stroke: #1e1e30; stroke-width: 1; }
 .ce-frame { stroke: #2e2e44; stroke-width: 1; }

src/views/ParticleAttributeControl.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="pac">
+    <div class="pac-head">
+      <span class="pac-label">{{ label }}</span>
+      <div v-if="showModes" class="pac-modes">
+        <button
+          v-for="item in modeItems"
+          :key="item.value"
+          class="pac-mode"
+          :class="{ on: mode === item.value }"
+          @click="$emit('update:mode', item.value)"
+        >{{ item.label }}</button>
+      </div>
+    </div>
+
+    <template v-if="mode === 'fixed' || mode === 'direction'">
+      <NumSlider
+        :label="mode === 'direction' ? '角度偏移' : '数值'"
+        :min="min"
+        :max="max"
+        :step="step"
+        :model-value="valueMin"
+        @update:model-value="$emit('update:valueMin', $event)"
+      />
+    </template>
+
+    <template v-else-if="mode === 'random'">
+      <NumSlider label="下限" :min="min" :max="max" :step="step" :model-value="valueMin" @update:model-value="$emit('update:valueMin', $event)" />
+      <NumSlider label="上限" :min="min" :max="max" :step="step" :model-value="valueMax" @update:model-value="$emit('update:valueMax', $event)" />
+    </template>
+
+    <template v-else>
+      <div class="pac-range">
+        <NumSlider label="范围下限" :min="min" :max="max" :step="step" :model-value="valueMin" @update:model-value="$emit('update:valueMin', $event)" />
+        <NumSlider label="范围上限" :min="min" :max="max" :step="step" :model-value="valueMax" @update:model-value="$emit('update:valueMax', $event)" />
+      </div>
+      <div class="pac-curve">
+        <CurveEditor :model-value="curve" :default-value="defaultCurve" @update:model-value="$emit('update:curve', $event)" />
+        <div class="pac-axis"><span>0</span><span>{{ curveLabel }}</span><span>1</span></div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import NumSlider from './NumSlider.vue'
+import CurveEditor from './CurveEditor.vue'
+
+export type AttributeMode = 'fixed' | 'random' | 'curve' | 'direction'
+type CurvePoint = { x: number; y: number }
+
+const props = withDefaults(defineProps<{
+  label: string
+  mode: AttributeMode
+  valueMin: number
+  valueMax: number
+  curve: CurvePoint[]
+  defaultCurve?: CurvePoint[]
+  min: number
+  max: number
+  step?: number
+  allowDirection?: boolean
+  allowCurve?: boolean
+  showModes?: boolean
+  curveLabel?: string
+}>(), {
+  step: 1,
+  allowDirection: false,
+  allowCurve: true,
+  showModes: true,
+  curveLabel: '曲线输入 →',
+  defaultCurve: () => [{ x: 0, y: 0 }, { x: 1, y: 1 }],
+})
+
+defineEmits<{
+  (e: 'update:mode', value: AttributeMode): void
+  (e: 'update:valueMin', value: number): void
+  (e: 'update:valueMax', value: number): void
+  (e: 'update:curve', value: CurvePoint[]): void
+}>()
+
+const modeItems = computed(() => {
+  const items: { label: string; value: AttributeMode }[] = [
+    { label: '固定', value: 'fixed' },
+    { label: '随机', value: 'random' },
+  ]
+  if (props.allowCurve) items.push({ label: '曲线', value: 'curve' })
+  if (props.allowDirection) items.push({ label: '发射方向', value: 'direction' })
+  return items
+})
+</script>
+
+<style scoped>
+.pac { padding: 10px; margin: 8px 0; border: 1px solid #2c3850; border-radius: 7px; background: #171d2a; }
+.pac-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
+.pac-label { color: #aeb8cf; font-size: 12px; font-weight: 600; white-space: nowrap; }
+.pac-modes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
+.pac-mode { padding: 4px 7px; border: 1px solid #344158; border-radius: 5px; background: #273246; color: #aeb8cf; font-size: 11px; cursor: pointer; }
+.pac-mode.on { border-color: #7774ff; background: #605df0; color: #fff; }
+.pac-curve { margin-top: 8px; }
+.pac-axis { display: flex; justify-content: space-between; margin-top: 3px; color: #5f6b82; font-size: 10px; }
+.pac :deep(.ns-label) { width: 58px; }
+.pac :deep(.ce-svg) { height: 96px; background: #0f1625; border-color: #30405a; }
+.pac :deep(.ce-tip) { color: #657188; }
+</style>

src/views/ParticlePanel.vue

@@ -97,15 +97,153 @@
         <div class="group-head" @click="toggle('attr')">
           <span class="caret">{{ collapsed.attr ? '▸' : '▾' }}</span><span>粒子属性</span>
         </div>
-        <div class="group-body" v-show="!collapsed.attr">
-          <NumSlider label="速度下限" :min="0" :max="400" :step="1" v-model="sys.config.speedMin" />
-          <NumSlider label="速度上限" :min="0" :max="600" :step="1" v-model="sys.config.speedMax" />
-          <NumSlider label="生命下限" :min="0.1" :max="5" :step="0.1" v-model="sys.config.lifeMin" />
-          <NumSlider label="生命上限" :min="0.1" :max="6" :step="0.1" v-model="sys.config.lifeMax" />
-          <NumSlider label="缩放下限" :min="0.05" :max="3" :step="0.05" v-model="sys.config.scaleMin" />
-          <NumSlider label="缩放上限" :min="0.05" :max="5" :step="0.05" v-model="sys.config.scaleMax" />
-          <NumSlider label="旋转速度" :min="-360" :max="360" :step="10" v-model="sys.config.rotationSpeedMin" />
-          <NumSlider label="随机种子" :min="0" :max="9999" :step="1" v-model="sys.config.seed" />
+        <div class="group-body attr-body" v-show="!collapsed.attr">
+          <div class="attr-section-title">粒子初始参数</div>
+
+          <ParticleAttributeControl
+            label="初始生命周期"
+            :allow-curve="false"
+            v-model:mode="sys.config.lifeMode"
+            v-model:value-min="sys.config.lifeMin"
+            v-model:value-max="sys.config.lifeMax"
+            v-model:curve="sys.config.lifeCurve"
+            :min="0.1" :max="10" :step="0.1"
+            curve-label="随机采样 →"
+          />
+
+          <ParticleAttributeControl
+            label="初始速度"
+            :allow-curve="false"
+            v-model:mode="sys.config.speedMode"
+            v-model:value-min="sys.config.speedMin"
+            v-model:value-max="sys.config.speedMax"
+            v-model:curve="sys.config.speedCurve"
+            :min="0" :max="1000" :step="1"
+            curve-label="随机采样 →"
+          />
+
+          <div class="attr-axis-head">
+            <span>初始缩放</span>
+            <div class="axis-modes">
+              <button class="axis-mode" :class="{ on: sys.config.scaleAxisMode === 'uniform' }" @click="sys.config.scaleAxisMode = 'uniform'">统一</button>
+              <button class="axis-mode" :class="{ on: sys.config.scaleAxisMode === 'separate' }" @click="sys.config.scaleAxisMode = 'separate'">XY分离</button>
+            </div>
+          </div>
+          <ParticleAttributeControl
+            :label="sys.config.scaleAxisMode === 'uniform' ? '初始缩放' : '缩放 X'"
+            :allow-curve="false"
+            v-model:mode="sys.config.scaleMode"
+            v-model:value-min="sys.config.scaleMin"
+            v-model:value-max="sys.config.scaleMax"
+            v-model:curve="sys.config.scaleCurve"
+            :min="0" :max="5" :step="0.05"
+            curve-label="随机采样 →"
+          />
+          <ParticleAttributeControl
+            v-if="sys.config.scaleAxisMode === 'separate'"
+            label="缩放 Y"
+            :show-modes="false"
+            :allow-curve="false"
+            v-model:mode="sys.config.scaleMode"
+            v-model:value-min="sys.config.scaleYMin"
+            v-model:value-max="sys.config.scaleYMax"
+            v-model:curve="sys.config.scaleYCurve"
+            :min="0" :max="5" :step="0.05"
+            curve-label="随机采样 →"
+          />
+
+          <ParticleAttributeControl
+            label="初始旋转"
+            allow-direction
+            :allow-curve="false"
+            v-model:mode="sys.config.initialRotationMode"
+            v-model:value-min="sys.config.initialRotationMin"
+            v-model:value-max="sys.config.initialRotationMax"
+            v-model:curve="sys.config.initialRotationCurve"
+            :min="-360" :max="360" :step="1"
+            curve-label="随机采样 →"
+          />
+
+          <div class="attr-section-title life-title">粒子生命周期变化参数</div>
+
+          <div class="life-item">
+            <label class="switch-row">
+              <input type="checkbox" v-model="sys.config.speedOverLifeEnabled" />
+              <span class="switch-ui"></span><span>生命周期内速度</span>
+            </label>
+            <ParticleAttributeControl
+              v-if="sys.config.speedOverLifeEnabled"
+              label="速度倍率"
+              :mode="sys.config.speedOverLifeMode"
+              @update:mode="setSpeedOverLifeMode"
+              v-model:value-min="sys.config.speedOverLifeMin"
+              v-model:value-max="sys.config.speedOverLifeMax"
+              v-model:curve="sys.config.speedOverLifeCurve"
+              :default-curve="FLAT_CURVE"
+              :min="0" :max="3" :step="0.05"
+              curve-label="生命周期 →"
+            />
+          </div>
+
+          <div class="life-item">
+            <label class="switch-row">
+              <input type="checkbox" v-model="sys.config.scaleOverLifeEnabled" @change="prepareScaleOverLifeCurve" />
+              <span class="switch-ui"></span><span>生命周期内缩放</span>
+            </label>
+            <template v-if="sys.config.scaleOverLifeEnabled">
+              <div class="axis-modes life-axis">
+                <button class="axis-mode" :class="{ on: sys.config.scaleOverLifeAxisMode === 'uniform' }" @click="sys.config.scaleOverLifeAxisMode = 'uniform'">统一</button>
+                <button class="axis-mode" :class="{ on: sys.config.scaleOverLifeAxisMode === 'separate' }" @click="sys.config.scaleOverLifeAxisMode = 'separate'">XY分离</button>
+              </div>
+              <ParticleAttributeControl
+                :label="sys.config.scaleOverLifeAxisMode === 'uniform' ? '缩放倍率' : '倍率 X'"
+                :mode="sys.config.scaleOverLifeMode"
+                @update:mode="setScaleOverLifeMode"
+                v-model:value-min="sys.config.scaleOverLifeMin"
+                v-model:value-max="sys.config.scaleOverLifeMax"
+                v-model:curve="sys.config.scaleOverLifeCurve"
+                :default-curve="FLAT_CURVE"
+                :min="0" :max="3" :step="0.05"
+                curve-label="生命周期 →"
+              />
+              <ParticleAttributeControl
+                v-if="sys.config.scaleOverLifeAxisMode === 'separate'"
+                label="倍率 Y"
+                :show-modes="false"
+                v-model:mode="sys.config.scaleOverLifeMode"
+                v-model:value-min="sys.config.scaleYOverLifeMin"
+                v-model:value-max="sys.config.scaleYOverLifeMax"
+                v-model:curve="sys.config.scaleYOverLifeCurve"
+                :default-curve="FLAT_CURVE"
+                :min="0" :max="3" :step="0.05"
+                curve-label="生命周期 →"
+              />
+            </template>
+          </div>
+
+          <div class="life-item">
+            <label class="switch-row">
+              <input type="checkbox" v-model="sys.config.rotationOverLifeEnabled" />
+              <span class="switch-ui"></span><span>生命周期内旋转</span>
+            </label>
+            <ParticleAttributeControl
+              v-if="sys.config.rotationOverLifeEnabled"
+              label="旋转速度"
+              v-model:mode="sys.config.rotationOverLifeMode"
+              v-model:value-min="sys.config.rotationSpeedMin"
+              v-model:value-max="sys.config.rotationSpeedMax"
+              v-model:curve="sys.config.rotationOverLifeCurve"
+              :default-curve="LINEAR_CURVE"
+              :min="-720" :max="720" :step="10"
+              curve-label="生命周期 →"
+            />
+          </div>
+
+          <div class="seed-row">
+            <label for="particle-seed">随机种子</label>
+            <input id="particle-seed" class="seed-input" type="number" min="0" step="1" v-model.number="sys.config.seed" />
+            <button class="seed-random" title="生成随机种子" @click="randomizeSeed">⚄</button>
+          </div>
         </div>
       </div>
 
@@ -131,7 +269,7 @@
               </select>
             </label>
             <div class="curve-wrap">
-              <CurveEditor v-model="sys.config.alphaCurve" />
+              <CurveEditor v-model="sys.config.alphaCurve" :default-value="ALPHA_CURVE" />
               <div class="curve-labels"><span>0(透明)</span><span>生命周期 →</span><span>1(不透明)</span></div>
             </div>
           </template>
@@ -226,10 +364,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watchEffect } from 'vue'
 import { useParticleStore } from '../store/particleStore'
+import { ensureEmitterConfig } from '../core/particleEmitter'
 import NumSlider from './NumSlider.vue'
 import CurveEditor from './CurveEditor.vue'
+import ParticleAttributeControl from './ParticleAttributeControl.vue'
 
 const store = useParticleStore()
 const activeIdx = computed(() => {
@@ -238,6 +378,21 @@ const activeIdx = computed(() => {
 })
 const sys = computed(() => store.systems[activeIdx.value] || null)
 
+// 开发热更新会保留旧的 Pinia 对象；渲染属性控件前先补齐新增字段。
+watchEffect(() => {
+  if (!sys.value) return
+  const config = ensureEmitterConfig(sys.value.config as any)
+  // 初始属性不再提供曲线模式；旧配置自动回退为随机。
+  if (config.lifeMode === 'curve') config.lifeMode = 'random'
+  if (config.speedMode === 'curve') config.speedMode = 'random'
+  if (config.scaleMode === 'curve') config.scaleMode = 'random'
+  if (config.initialRotationMode === 'curve') config.initialRotationMode = 'random'
+})
+
+const LINEAR_CURVE = [{ x: 0, y: 0 }, { x: 1, y: 1 }]
+const FLAT_CURVE = [{ x: 0, y: 1 }, { x: 1, y: 1 }]
+const ALPHA_CURVE = [{ x: 0, y: 0 }, { x: 0.2, y: 1 }, { x: 0.8, y: 1 }, { x: 1, y: 0 }]
+
 const collapsed = reactive<Record<string, boolean>>({
   scene: false, emitMode: false, shape: false, attr: false, look: false, mods: false, export: false,
 })
@@ -245,6 +400,40 @@ function toggle(key: string) { collapsed[key] = !collapsed[key] }
 
 function select(i: number) { store.selectSystem(store.systems[i]?.id ?? 0) }
 function addSys() { store.addSystem() }
+function randomizeSeed() {
+  if (sys.value) sys.value.config.seed = Math.floor(Math.random() * 999999) + 1
+}
+
+function setSpeedOverLifeMode(mode: 'fixed' | 'random' | 'curve' | 'direction') {
+  const config = sys.value?.config
+  if (!config || mode === 'direction') return
+  config.speedOverLifeMode = mode
+  // 旧默认是 1~1，曲线映射后永远为 1；切换曲线时改为有效倍率范围。
+  if (mode === 'curve' && config.speedOverLifeMin === config.speedOverLifeMax) {
+    config.speedOverLifeMin = 0
+    config.speedOverLifeMax = 1
+  }
+}
+
+function prepareScaleOverLifeCurve() {
+  const config = sys.value?.config
+  if (!config || config.scaleOverLifeMode !== 'curve') return
+  if (config.scaleOverLifeMin === config.scaleOverLifeMax) {
+    config.scaleOverLifeMin = 0
+    config.scaleOverLifeMax = 1
+  }
+  if (config.scaleYOverLifeMin === config.scaleYOverLifeMax) {
+    config.scaleYOverLifeMin = 0
+    config.scaleYOverLifeMax = 1
+  }
+}
+
+function setScaleOverLifeMode(mode: 'fixed' | 'random' | 'curve' | 'direction') {
+  const config = sys.value?.config
+  if (!config || mode === 'direction') return
+  config.scaleOverLifeMode = mode
+  prepareScaleOverLifeCurve()
+}
 
 // 各发射器形状的默认参数:切换形状时应用(只影响形状相关字段,不牵连其他)
 const SHAPE_DEFAULTS: Record<string, Partial<any>> = {
@@ -270,7 +459,7 @@ function clearTexture() { resetTexture() }
 </script>
 
 <style scoped>
-.panel { width: 100%; height: 100%; overflow-y: auto; background: #14141f; border-left: 1px solid #2a2a3c; padding: 12px; box-sizing: border-box; }
+.panel { width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #14141f; border-left: 1px solid #2a2a3c; padding: 12px; box-sizing: border-box; }
 /* 深色主题滚动条:细窄、圆角、暗色,避免默认白条突兀 */
 .panel::-webkit-scrollbar { width: 6px; }
 .panel::-webkit-scrollbar-track { background: transparent; }
@@ -328,4 +517,27 @@ function clearTexture() { resetTexture() }
 .thumb-note { color: #667; font-size: 11px; margin: 4px 0 2px; }
 .hex { font-size: 11px; color: #889; margin-left: auto; font-variant-numeric: tabular-nums; }
 .inp.tiny { width: 46px; flex: 0 0 46px; text-align: center; }
+
+/* 粒子属性面板 */
+.attr-body { padding: 10px; background: #151b27; }
+.attr-section-title { margin: 2px 0 8px; color: #9ca8c0; font-size: 12px; font-weight: 700; }
+.attr-section-title.life-title { margin-top: 14px; padding-top: 12px; border-top: 1px solid #2d3950; }
+.attr-axis-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 1px -2px; color: #aeb8cf; font-size: 12px; font-weight: 600; }
+.axis-modes { display: flex; gap: 4px; }
+.axis-mode { padding: 4px 8px; border: 1px solid #344158; border-radius: 5px; background: #273246; color: #aeb8cf; font-size: 11px; cursor: pointer; }
+.axis-mode.on { border-color: #7774ff; background: #605df0; color: #fff; }
+.life-item { padding: 9px 0; border-bottom: 1px solid #2a3549; }
+.switch-row { display: flex; align-items: center; gap: 9px; color: #b8c1d5; font-size: 12px; cursor: pointer; }
+.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
+.switch-ui { position: relative; width: 32px; height: 18px; border-radius: 10px; background: #354258; transition: background .16s ease; }
+.switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
+.switch-row input:checked + .switch-ui { background: #625ff1; }
+.switch-row input:checked + .switch-ui::after { transform: translateX(14px); }
+.life-axis { margin: 9px 0 2px 42px; }
+.seed-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #2d3950; }
+.seed-row label { width: 64px; color: #8f9bb5; font-size: 12px; }
+.seed-input { min-width: 0; flex: 1; padding: 6px 8px; border: 1px solid #344158; border-radius: 6px; outline: none; background: #0f1625; color: #e2e7f2; font-size: 12px; }
+.seed-input:focus { border-color: #625ff1; }
+.seed-random { width: 34px; height: 30px; border: 1px solid #3a4860; border-radius: 6px; background: #2c3950; color: #d7def0; cursor: pointer; }
+.seed-random:hover { background: #394964; }
 </style>