/* MarSpArk 设计语言 · 内页（新建策略、活动内容三步：玩法规则 / 页面交互 / 预览确认）。在 marspark.css 之后加载。
   规则与首页一致：舱体冷色，火种色只给动作和当前位置；面板对接入位、选中用 HUD 角标锁定、连线是航线。 */

/* ---------- 新建策略页 ---------- */
html body #appShell .strategy-page{animation:mp-dock .6s var(--ease-dock) backwards}
html body #appShell .strategy-choice-tile{position:relative;transition:border-color .25s,box-shadow .3s}
html body #appShell .strategy-choice-tile:hover{border-color:color-mix(in srgb,var(--spark-500) 45%,transparent)!important;box-shadow:0 6px 20px var(--spark-soft)!important}
html body #appShell .strategy-choice-tile::after{content:"";position:absolute;inset:-4px;pointer-events:none;border-radius:4px;opacity:0;transform:scale(1.03);transition:opacity .25s,transform .45s var(--ease-dock);
  background:
   linear-gradient(var(--hud-tick),var(--hud-tick)) left top/10px 1.5px,linear-gradient(var(--hud-tick),var(--hud-tick)) left top/1.5px 10px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) right top/10px 1.5px,linear-gradient(var(--hud-tick),var(--hud-tick)) right top/1.5px 10px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) left bottom/10px 1.5px,linear-gradient(var(--hud-tick),var(--hud-tick)) left bottom/1.5px 10px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) right bottom/10px 1.5px,linear-gradient(var(--hud-tick),var(--hud-tick)) right bottom/1.5px 10px;background-repeat:no-repeat}
html body #appShell .strategy-choice-tile:hover::after,html body #appShell .strategy-choice-tile:focus-visible::after{opacity:1;transform:none}

/* ---------- 工作台外壳：舱门对接 ---------- */
html body #strategyPicker[open]{animation:mp-hatch .65s var(--ease-dock) backwards}
@keyframes mp-hatch{from{opacity:0;transform:translateY(18px) scale(.965);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
html body #strategyPicker::backdrop{background:radial-gradient(1200px 800px at 50% 40%,rgb(20 14 12 / .35),rgb(5 6 10 / .62));backdrop-filter:blur(3px)}
/* 舱门四角的 HUD 折角 */
html body #strategyPicker.aw-dialog{background-image:
   linear-gradient(var(--hud-tick),var(--hud-tick)),linear-gradient(var(--hud-tick),var(--hud-tick)),
   linear-gradient(var(--hud-tick),var(--hud-tick)),linear-gradient(var(--hud-tick),var(--hud-tick));
  background-size:14px 2px,2px 14px,14px 2px,2px 14px;background-position:10px 10px,10px 10px,calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) calc(100% - 10px);background-repeat:no-repeat}

/* 标题栏：活动名前的轨道标 */
html body #strategyPicker .aw-brand{position:relative;padding-left:30px}
html body #strategyPicker .aw-brand::before{content:"";position:absolute;left:0;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--spark-500) 0 5.5px,transparent 6px);box-shadow:inset 0 0 0 1px var(--orbit-line)}
html body #strategyPicker .aw-brand::after{content:"";position:absolute;left:0;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;animation:mp-spin 14s linear infinite;
  background:radial-gradient(circle at 50% 0,var(--spark-300) 0 2px,transparent 2.5px)}

/* 上下文条：遥测读数 */
html body #strategyPicker .aw-context-strip{font-family:var(--font-mono);letter-spacing:.02em}
html body #strategyPicker .aw-context-strip b{color:var(--n-800)}

/* ---------- 步骤条：一条航线，当前步是火种 ---------- */
html body #strategyPicker .aw-steps-nav button.active{background:transparent!important;box-shadow:none!important}
html body #strategyPicker .aw-steps-nav button::before{background:repeating-linear-gradient(90deg,var(--n-300) 0 4px,transparent 4px 8px)!important}
html body #strategyPicker .aw-steps-nav button.done::before,html body #strategyPicker .aw-steps-nav button.active::before{background:linear-gradient(90deg,var(--spark-600),var(--spark-400))!important}
html body #strategyPicker .aw-steps-nav .aw-step-no{position:relative;transition:background .35s,border-color .35s,box-shadow .35s,transform .45s var(--ease-ignite)}
html body #strategyPicker .aw-steps-nav button.active .aw-step-no{background:radial-gradient(circle at 35% 30%,var(--spark-400),var(--spark-600) 70%)!important;border-color:transparent!important;color:var(--on-accent)!important;transform:scale(1.08);box-shadow:0 0 0 4px var(--spark-soft),0 0 16px var(--spark-glow)!important}
html body #strategyPicker .aw-steps-nav button.active .aw-step-no::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--spark-500) 50%,transparent);animation:mp-spin 9s linear infinite;
  background:radial-gradient(circle at 50% 0,var(--spark-300) 0 2px,transparent 2.5px)}
html body #strategyPicker .aw-steps-nav button.active b{color:var(--spark-600)!important}
html[data-theme=dark] body #strategyPicker .aw-steps-nav button.active b{color:var(--spark-400)!important}
html body #strategyPicker .aw-steps-nav button.done .aw-step-no{background:var(--n-0)!important;border-color:var(--spark-500)!important;color:var(--spark-600)!important}
html body #strategyPicker .aw-steps-nav button:not(.active):hover .aw-step-no{border-color:var(--spark-400)}

/* 换步：工作区从行进方向对接 */
html body #strategyPicker .aw-body.mp-docking{animation:mp-dock-side .6s var(--ease-dock) backwards}
html body #strategyPicker .aw-body.mp-docking.rev{animation-name:mp-dock-side-rev}

/* ---------- 主操作 = 点火 ---------- */
html body #strategyPicker.aw-dialog .aw-primary:not(:disabled),html body #strategyPicker [data-hf-primary]:not(:disabled){background:linear-gradient(135deg,var(--spark-600),var(--spark-700))!important;border-color:transparent!important;color:var(--on-accent)!important;box-shadow:0 4px 14px var(--me-glow)!important;transition:transform .2s var(--ease-ignite),box-shadow .3s}
html body #strategyPicker.aw-dialog .aw-primary:not(:disabled):hover,html body #strategyPicker [data-hf-primary]:not(:disabled):hover{background:linear-gradient(135deg,var(--spark-500),var(--spark-700))!important;box-shadow:0 6px 22px var(--spark-glow)!important;transform:translateY(-1px)}
html body #strategyPicker.aw-dialog .aw-primary:not(:disabled):active{transform:scale(.97)}
html body #strategyPicker .aw-footer-dot{animation:mp-breathe-dot 2.6s ease-in-out infinite}
html body #strategyPicker .aw-footer-dot.warn{animation-name:mp-flicker}
@keyframes mp-breathe-dot{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 0%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--n-400) 18%,transparent)}}
@keyframes mp-flicker{0%,100%{opacity:1;box-shadow:0 0 6px var(--a-500)}45%{opacity:.55;box-shadow:0 0 2px var(--a-500)}60%{opacity:.9}}

/* ---------- 画布：星图 ---------- */
html body #strategyPicker .cv-viewport,html body #strategyPicker .np-board{
  background-color:var(--n-50)!important;
  background-image:
   radial-gradient(circle,color-mix(in srgb,var(--n-400) 70%,transparent) 1px,transparent 1.3px),
   radial-gradient(circle,color-mix(in srgb,var(--n-300) 60%,transparent) .7px,transparent 1px),
   linear-gradient(color-mix(in srgb,var(--n-300) 30%,transparent) 1px,transparent 1px),
   linear-gradient(90deg,color-mix(in srgb,var(--n-300) 30%,transparent) 1px,transparent 1px)!important;
  background-size:100px 100px,20px 20px,100px 100px,100px 100px!important;background-position:-50px -50px,0 0,0 0,0 0!important}
html[data-theme=dark] body #strategyPicker .cv-viewport,html[data-theme=dark] body #strategyPicker .np-board{background-color:#0c0f17!important}
/* 画布四角的取景框 */
html body #strategyPicker .cv-panel,html body #strategyPicker .np-board{position:relative}
html body #strategyPicker .cv-panel::after{content:"";position:absolute;inset:8px;pointer-events:none;z-index:3;opacity:.55;
  background:
   linear-gradient(var(--n-400),var(--n-400)) left top/12px 1px,linear-gradient(var(--n-400),var(--n-400)) left top/1px 12px,
   linear-gradient(var(--n-400),var(--n-400)) right top/12px 1px,linear-gradient(var(--n-400),var(--n-400)) right top/1px 12px,
   linear-gradient(var(--n-400),var(--n-400)) left bottom/12px 1px,linear-gradient(var(--n-400),var(--n-400)) left bottom/1px 12px,
   linear-gradient(var(--n-400),var(--n-400)) right bottom/12px 1px,linear-gradient(var(--n-400),var(--n-400)) right bottom/1px 12px;background-repeat:no-repeat}

/* 空画布：未抵达的星域 */
html body #strategyPicker .cv-empty,html body #strategyPicker .np-canvas-hint{position:relative}
html body #strategyPicker .cv-empty::before,html body #strategyPicker .np-canvas-hint::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:1px dashed var(--orbit-line);pointer-events:none;animation:mp-spin 50s linear infinite;
  background:radial-gradient(circle at 50% 0,var(--spark-400) 0 2.5px,transparent 3px)}

/* ---------- 节点：对接、选中锁定 ---------- */
html body #strategyPicker .cv-node.mp-new,html body #strategyPicker .np-node.mp-new{animation:mp-node-in .6s var(--ease-ignite) backwards}
@keyframes mp-node-in{from{opacity:0;transform:scale(.9);filter:blur(3px) brightness(1.4)}60%{filter:none}to{opacity:1;transform:none}}
html body #strategyPicker .cv-node.selected{border-color:color-mix(in srgb,var(--spark-500) 70%,transparent)!important;box-shadow:0 0 0 3px var(--spark-soft),0 14px 36px color-mix(in srgb,var(--spark-600) 16%,transparent)!important}
html body #strategyPicker .cv-node.selected .cv-node-heading::before{background:linear-gradient(90deg,var(--spark-600),var(--spark-300))!important}
html body #strategyPicker .cv-node::after{content:"";position:absolute;inset:-8px;pointer-events:none;border-radius:6px;opacity:0;transform:scale(1.04);transition:opacity .25s,transform .45s var(--ease-dock);
  background:
   linear-gradient(var(--hud-tick),var(--hud-tick)) left top/14px 2px,linear-gradient(var(--hud-tick),var(--hud-tick)) left top/2px 14px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) right top/14px 2px,linear-gradient(var(--hud-tick),var(--hud-tick)) right top/2px 14px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) left bottom/14px 2px,linear-gradient(var(--hud-tick),var(--hud-tick)) left bottom/2px 14px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) right bottom/14px 2px,linear-gradient(var(--hud-tick),var(--hud-tick)) right bottom/2px 14px;background-repeat:no-repeat}
html body #strategyPicker .cv-node.selected::after{opacity:1;transform:none}
html body #strategyPicker .cv-action:hover{border-color:color-mix(in srgb,var(--spark-500) 45%,transparent)!important}
html body #strategyPicker .cv-action.selected,html body #strategyPicker .cv-action[aria-pressed=true],html body #strategyPicker .cv-action.active{background:color-mix(in srgb,var(--spark-500) 7%,var(--n-0))!important;border-color:var(--spark-500)!important}
html body #strategyPicker .cv-action.selected .cv-action-number,html body #strategyPicker .cv-action[aria-pressed=true] .cv-action-number{background:var(--spark-600)!important;color:var(--on-accent)!important}
html body #strategyPicker .cv-port{border-color:var(--spark-500)!important;transition:box-shadow .2s,transform .2s var(--ease-ignite)}
html body #strategyPicker .cv-port:hover{box-shadow:0 0 0 4px var(--spark-soft),0 0 10px var(--spark-glow);transform:translateY(-50%) scale(1.2)}

html body #strategyPicker .np-node.selected{outline:1.5px solid var(--spark-500)!important;outline-offset:1px}
html body #strategyPicker .np-node.selected .np-resize{border-color:var(--spark-500)!important;background:var(--n-0)!important}
html body #strategyPicker .np-frame.active>header b{color:var(--spark-600)}
html body #strategyPicker .np-frame.active>header::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--spark-400);box-shadow:0 0 8px var(--spark-glow);flex:0 0 auto}

html body #strategyPicker .np-port{background:var(--spark-500)!important;color:var(--spark-500)!important;box-shadow:0 0 0 1px var(--spark-600),0 0 10px var(--spark-glow)!important}
html body #strategyPicker .np-node.selected>.np-node-tag{background:var(--spark-600)!important;color:var(--on-accent)!important}

/* 画布上的浮条是 HUD 控制台，两种主题下都用深色舱体 */
html body #strategyPicker .lg-float{background:rgb(17 21 30 / .94)!important;color:rgb(238 241 246)!important;box-shadow:0 0 0 1px rgb(255 255 255 / .06),0 8px 24px rgb(0 0 0 / .25)!important;backdrop-filter:blur(8px)}
html body #strategyPicker .lg-float .lg-chip{background:rgb(255 255 255 / .07)!important;border-color:rgb(255 255 255 / .16)!important;color:rgb(238 241 246)!important}
html body #strategyPicker .lg-float .lg-chip:hover{border-color:var(--spark-400)!important;background:rgb(242 100 58 / .14)!important}
html body #strategyPicker .lg-float>span,html body #strategyPicker .lg-float .lg-chip.add{color:var(--spark-300)!important}

/* ---------- 连线：航线，火种沿线流动 ---------- */
html body #strategyPicker .cv-wire path:not(.cv-wire-hit),html body #strategyPicker path.cv-wire,html body #strategyPicker .np-wire path:not(.np-wire-hit){stroke-dasharray:6 6;animation:mp-flow 2.4s linear infinite}
html body #strategyPicker .cv-wire.selected path:not(.cv-wire-hit),html body #strategyPicker path.cv-wire.selected,html body #strategyPicker .np-wire.selected path:not(.np-wire-hit){stroke:var(--spark-500)!important;filter:drop-shadow(0 0 3px var(--spark-glow));animation-duration:1.2s}
@keyframes mp-flow{to{stroke-dashoffset:-24}}
html body #strategyPicker .np-wires marker path{fill:var(--spark-500)}
html body #strategyPicker .np-wires #npLiveWire{stroke:var(--spark-500)!important}

/* ---------- 左侧库：悬停锁定、按下点火 ---------- */
html body #strategyPicker .rule-library button,html body #strategyPicker .np-library button,html body #strategyPicker .rb-source{position:relative;transition:border-color .2s,background-color .2s,transform .25s var(--ease-ignite)}
html body #strategyPicker .rule-library button:hover,html body #strategyPicker .np-basics button:hover,html body #strategyPicker .rb-source:hover{border-color:color-mix(in srgb,var(--spark-500) 55%,transparent)!important;background-color:color-mix(in srgb,var(--spark-500) 6%,var(--n-0))!important}
html body #strategyPicker .rule-library button:active,html body #strategyPicker .np-basics button:active{transform:scale(.95)}

/* ---------- 预览确认：遥测核对 ---------- */
html body #strategyPicker .ae-phone{border:7px solid #19212e!important;border-radius:32px!important;box-shadow:0 0 0 1px var(--orbit-line),0 24px 60px rgb(15 23 42 / .22)!important;animation:mp-dock .7s var(--ease-dock) backwards}
html body #strategyPicker .aw-mock-label{font-family:var(--font-mono);letter-spacing:.06em}
html body #strategyPicker .aw-checklist h3{position:relative;padding-left:16px}
html body #strategyPicker .aw-checklist h3::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--spark-400);box-shadow:0 0 0 3px var(--spark-soft)}
html body #strategyPicker .aw-auto-check[open]>*:not(summary),html body #strategyPicker .lg-auto>*{animation:mp-readout .45s var(--ease-dock) backwards}
@keyframes mp-readout{from{opacity:0;transform:translateY(6px)}}
html body #strategyPicker .aw-auto-check[open]>*:nth-child(2),html body #strategyPicker .lg-auto>*:nth-child(1){animation-delay:.05s}
html body #strategyPicker .aw-auto-check[open]>*:nth-child(3),html body #strategyPicker .lg-auto>*:nth-child(2){animation-delay:.12s}
html body #strategyPicker .lg-auto>*:nth-child(3){animation-delay:.19s}html body #strategyPicker .lg-auto>*:nth-child(4){animation-delay:.26s}html body #strategyPicker .lg-auto>*:nth-child(5){animation-delay:.33s}
html body #strategyPicker .aw-problem{transition:border-color .2s,transform .25s var(--ease-dock)}
html body #strategyPicker .aw-problem:hover{border-color:color-mix(in srgb,var(--spark-500) 50%,transparent)!important;transform:translateX(2px)}
html body #strategyPicker .lg-auto,html body #strategyPicker .aw-auto-check{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html body #strategyPicker[open],html body #appShell .strategy-page,html body #strategyPicker .aw-body.mp-docking,html body #strategyPicker .mp-new,html body #strategyPicker .ae-phone,
  html body #strategyPicker .aw-brand::after,html body #strategyPicker .aw-steps-nav .aw-step-no::after,html body #strategyPicker .cv-empty::before,html body #strategyPicker .np-canvas-hint::before,
  html body #strategyPicker path,html body #strategyPicker .aw-footer-dot,html body #strategyPicker .lg-auto>*,html body #strategyPicker .aw-auto-check>*{animation:none!important}
}