/* ============================================================================
   Feedback transmission — a cinematic "encrypt → package → transmit → delivered"
   sequence shown when a bug report / suggestion is submitted, replacing the plain
   toast. Cosmic secure-channel theme built on the app's accent tokens; theme-aware
   and reduced-motion aware. Pure CSS + a canvas starfield (in feedback-transmit.js).
   ============================================================================ */
.ftxBackdrop{
  position:fixed; inset:0; z-index:2147483600;
  display:grid; place-items:center; padding:20px;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb,var(--accent) 15%, rgba(4,7,14,.92)), rgba(3,5,11,.97) 72%);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .4s ease;
}
.ftxBackdrop.ftxIn{opacity:1}
.ftxStars{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}

.ftxConsole{
  position:relative; z-index:2; width:min(540px,100%);
  padding:26px 26px 22px; border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel,#0f1620) 82%, transparent), color-mix(in srgb,#060a12 90%, transparent));
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 60px -12px color-mix(in srgb,var(--accent) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(16px) scale(.97); transition:transform .45s cubic-bezier(.2,.8,.2,1);
  color:var(--text);
}
.ftxBackdrop.ftxIn .ftxConsole{transform:none}
/* rotating conic border glow */
.ftxConsole::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1; padding:2px;
  background:conic-gradient(from 0deg, transparent, color-mix(in srgb,var(--accent) 75%,transparent), transparent 28%, color-mix(in srgb,var(--accent2,var(--accent)) 70%,transparent), transparent 58%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:ftxBorder 6s linear infinite; opacity:.85;
}
@keyframes ftxBorder{to{transform:rotate(1turn)}}
/* scanline sweep */
.ftxScan{position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; opacity:.5}
.ftxScan::after{content:""; position:absolute; left:0; right:0; height:34%; top:-34%; background:linear-gradient(180deg, transparent, color-mix(in srgb,var(--accent) 15%,transparent), transparent); animation:ftxScanMove 3.6s ease-in-out infinite}
@keyframes ftxScanMove{to{top:120%}}

.ftxHead{text-align:center; position:relative; z-index:3}
.ftxBadge{display:inline-flex; align-items:center; gap:7px; padding:4px 12px; border-radius:999px; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent2,var(--accent)); font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase}
.ftxBadge i{width:7px; height:7px; border-radius:50%; background:var(--accent2,var(--accent)); box-shadow:0 0 8px var(--accent); animation:ftxBlink 1.2s ease-in-out infinite}
@keyframes ftxBlink{50%{opacity:.25}}
.ftxTitle{margin:12px 0 4px; font-size:1.24rem; letter-spacing:-.01em; text-wrap:balance; transition:color .3s ease}
.ftxSub{margin:0 auto; max-width:42ch; color:var(--muted); font-size:.85rem; line-height:1.5; min-height:2.6em}

/* ---------------- scene ---------------- */
.ftxScene{position:relative; height:198px; margin:14px auto 6px; width:100%}
.ftxOrbit{position:absolute; top:50%; left:50%; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); transform:translate(-50%,-50%); opacity:.6}
.ftxOrbit1{width:150px; height:150px; border-style:dashed; animation:ftxSpin 9s linear infinite}
.ftxOrbit2{width:110px; height:110px; border-color:color-mix(in srgb,var(--accent2,var(--accent)) 30%,transparent); animation:ftxSpin 6s linear infinite reverse}
.ftxOrbit3{width:202px; height:202px; border-style:dotted; opacity:.32; animation:ftxSpin 17s linear infinite}
@keyframes ftxSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}

.ftxCore{position:absolute; top:50%; left:50%; width:80px; height:80px; transform:translate(-50%,-50%); display:grid; place-items:center; transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ftxCoreGlow{position:absolute; inset:-32%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--accent) 55%,transparent), transparent 70%); filter:blur(6px); animation:ftxPulse 2s ease-in-out infinite; transition:background .4s ease}
@keyframes ftxPulse{50%{transform:scale(1.16); opacity:.72}}
.ftxHexPacket{position:absolute; width:72px; height:72px; opacity:0; transform:scale(.5) rotate(-24deg); transition:opacity .4s, transform .5s cubic-bezier(.2,.9,.2,1)}
.ftxHexPacket polygon{fill:color-mix(in srgb,var(--accent) 22%,transparent); stroke:var(--accent); stroke-width:2.5; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 70%,transparent))}
.ftxLock{position:absolute; width:42px; height:42px; fill:none; stroke:#7fe7ff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.6); transition:opacity .35s, transform .45s cubic-bezier(.2,.9,.2,1); filter:drop-shadow(0 0 6px #4fd0ff)}
.ftxLock path{stroke-dasharray:42; stroke-dashoffset:42}
.ftxCoreCheck{position:absolute; display:grid; place-items:center; width:100%; height:100%; opacity:0; transform:scale(.4)}
.ftxCoreCheck svg{width:46px; height:46px; fill:none; stroke:var(--good,#3fdd7f); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 9px color-mix(in srgb,var(--good,#3fdd7f) 75%,transparent))}
.ftxCoreCheck svg path{stroke-dasharray:34; stroke-dashoffset:34}

.ftxSat{position:absolute; top:4px; right:14px; width:48px; height:48px; opacity:.32; transition:opacity .4s; color:var(--accent2,var(--accent))}
.ftxSat svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ftxSatWave{position:absolute; top:62%; left:24%; width:14px; height:14px; border:1.5px solid var(--accent); border-radius:50%; transform:translate(-50%,-50%) scale(.4); opacity:0}

.ftxServer{position:absolute; bottom:6px; left:50%; transform:translateX(-50%) scale(.55); width:46px; height:46px; opacity:0; transition:opacity .4s, transform .5s cubic-bezier(.2,.9,.2,1); color:var(--good,#3fdd7f)}
.ftxServer svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--good,#3fdd7f) 55%,transparent))}

.ftxShock{position:absolute; top:50%; left:50%; width:44px; height:44px; border:2px solid var(--good,#3fdd7f); border-radius:50%; transform:translate(-50%,-50%) scale(0); opacity:0}

/* ---------------- per-stage ---------------- */
.stage-encrypt .ftxLock{opacity:1; transform:scale(1)}
.stage-encrypt .ftxLock path{animation:ftxDraw .6s ease forwards}
.stage-encrypt .ftxCoreGlow{background:radial-gradient(circle,#3fd0ff88,transparent 70%)}
@keyframes ftxDraw{to{stroke-dashoffset:0}}

.stage-package .ftxLock{opacity:0; transform:scale(1.5)}
.stage-package .ftxHexPacket{opacity:1; transform:scale(1) rotate(0)}
.stage-package .ftxCore{transform:translate(-50%,-50%) scale(1.05)}

.stage-transmit .ftxHexPacket{opacity:1; transform:scale(.92); animation:ftxPacketPulse .55s ease-in-out infinite}
@keyframes ftxPacketPulse{50%{transform:scale(1.06)}}
.stage-transmit .ftxSat{opacity:1}
.stage-transmit .ftxSatWave{animation:ftxWave 1.4s ease-out infinite}
.stage-transmit .ftxSatWave:nth-of-type(2){animation-delay:.7s}
@keyframes ftxWave{0%{transform:translate(-50%,-50%) scale(.4); opacity:.9}100%{transform:translate(-50%,-50%) scale(3.6); opacity:0}}
.stage-transmit .ftxOrbit1,.stage-transmit .ftxOrbit2,.stage-transmit .ftxOrbit3{animation-duration:2.6s!important}

.stage-deliver .ftxHexPacket{opacity:0; transform:translate(0,58px) scale(.28); transition:opacity .5s, transform .6s cubic-bezier(.5,0,.9,.6)}
.stage-deliver .ftxServer{opacity:1; transform:translateX(-50%) scale(1)}
.stage-deliver .ftxShock{animation:ftxShockwave .85s ease-out forwards}
@keyframes ftxShockwave{0%{transform:translate(-50%,-50%) scale(0); opacity:.9}100%{transform:translate(-50%,-50%) scale(3.1); opacity:0}}
.stage-deliver .ftxOrbit{opacity:.24}

.stage-done .ftxCore{transform:translate(-50%,-50%) scale(1.12)}
.stage-done .ftxHexPacket,.stage-done .ftxLock{opacity:0}
.stage-done .ftxCoreCheck{opacity:1; transform:scale(1); transition:opacity .3s, transform .55s cubic-bezier(.2,1.5,.4,1)}
.stage-done .ftxCoreCheck svg path{animation:ftxDraw .5s ease .12s forwards}
.stage-done .ftxCoreGlow{background:radial-gradient(circle, color-mix(in srgb,var(--good,#3fdd7f) 55%,transparent), transparent 70%)}
.stage-done .ftxServer{opacity:1; transform:translateX(-50%) scale(1)}
.stage-done .ftxOrbit{border-color:color-mix(in srgb,var(--good,#3fdd7f) 30%,transparent); animation-duration:13s!important}

.stage-error .ftxCoreGlow{background:radial-gradient(circle, color-mix(in srgb,var(--bad,#f0603f) 50%,transparent), transparent 70%)}
.stage-error .ftxHexPacket{opacity:1}
.stage-error .ftxHexPacket polygon{stroke:var(--bad,#f0603f); fill:color-mix(in srgb,var(--bad,#f0603f) 18%,transparent); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--bad,#f0603f) 60%,transparent))}
.stage-error .ftxTitle{color:var(--bad,#f0603f)}
.stage-error .ftxOrbit{animation-play-state:paused; opacity:.3}

/* ---------------- steps ---------------- */
.ftxSteps{display:flex; justify-content:center; gap:8px; margin:8px 0 14px; padding:0; list-style:none; position:relative; z-index:3; flex-wrap:wrap}
.ftxSteps li{display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface-input,var(--panel2,var(--panel))) 60%,transparent); color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.02em; transition:.3s}
.ftxStepDot{width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.5; transition:.3s}
.ftxSteps li.active{border-color:var(--accent); color:var(--accent2,var(--accent)); background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ftxSteps li.active .ftxStepDot{opacity:1; box-shadow:0 0 8px var(--accent); animation:ftxDotPulse 1s ease-in-out infinite}
@keyframes ftxDotPulse{50%{transform:scale(1.55)}}
.ftxSteps li.done{border-color:color-mix(in srgb,var(--good,#3fdd7f) 45%,var(--line)); color:var(--good,#3fdd7f)}
.ftxSteps li.done .ftxStepDot{opacity:1; background:var(--good,#3fdd7f); box-shadow:none; animation:none}
.ftxSteps li.error{border-color:var(--bad,#f0603f); color:var(--bad,#f0603f)}
.ftxSteps li.error .ftxStepDot{background:var(--bad,#f0603f); animation:none}

/* ---------------- progress + hex ---------------- */
.ftxProgress{position:relative; z-index:3; height:5px; border-radius:999px; background:color-mix(in srgb,var(--line) 70%,transparent); overflow:hidden}
.ftxProgressFill{display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--accent2,var(--accent)),var(--accent)); transition:width .6s cubic-bezier(.3,.8,.3,1); position:relative}
.ftxProgressFill::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transform:translateX(-100%); animation:ftxShimmer 1.4s linear infinite}
@keyframes ftxShimmer{to{transform:translateX(220%)}}
.stage-done .ftxProgressFill{background:linear-gradient(90deg,color-mix(in srgb,var(--good,#3fdd7f) 80%,var(--accent)),var(--good,#3fdd7f))}
.stage-error .ftxProgressFill{background:var(--bad,#f0603f)}
.stage-done .ftxProgressFill::after,.stage-error .ftxProgressFill::after{display:none}

.ftxHex{margin-top:11px; height:1.15em; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.66rem; letter-spacing:.2em; color:color-mix(in srgb,var(--accent) 60%,var(--muted)); opacity:.72; white-space:nowrap; overflow:hidden}
.stage-error .ftxHex{color:var(--bad,#f0603f)}

/* ---------------- actions ---------------- */
.ftxActions{display:flex; justify-content:center; margin-top:14px; position:relative; z-index:3}
.ftxActions:empty{margin-top:0}
.ftxBtn{padding:11px 32px; border-radius:12px; border:0; font-weight:800; font-size:.9rem; letter-spacing:.02em; cursor:pointer; color:#05130a; background:linear-gradient(180deg,var(--good,#3fdd7f),color-mix(in srgb,var(--good,#3fdd7f) 82%,#000)); box-shadow:0 10px 26px -8px color-mix(in srgb,var(--good,#3fdd7f) 60%,transparent); animation:ftxBtnIn .4s ease both; transition:transform .15s ease, box-shadow .15s ease}
.stage-error .ftxBtn{color:#fff; background:linear-gradient(180deg,var(--bad,#f0603f),color-mix(in srgb,var(--bad,#f0603f) 82%,#000)); box-shadow:0 10px 26px -8px color-mix(in srgb,var(--bad,#f0603f) 55%,transparent)}
.ftxBtn:hover{transform:translateY(-1px)}
@keyframes ftxBtnIn{from{opacity:0; transform:translateY(8px)}}

@media (prefers-reduced-motion:reduce){
  .ftxBackdrop,.ftxConsole{transition:opacity .2s}
  .ftxOrbit,.ftxCoreGlow,.ftxSatWave,.ftxScan::after,.ftxConsole::before,.ftxProgressFill::after,.ftxBadge i,.ftxStepDot,.ftxHexPacket,.ftxShock{animation:none!important}
  .stage-transmit .ftxHexPacket{animation:none!important}
  .ftxLock path,.ftxCoreCheck svg path{stroke-dashoffset:0!important; animation:none!important}
}
@media(max-width:560px){
  .ftxConsole{padding:20px 15px 16px; border-radius:18px}
  .ftxScene{height:172px}
  .ftxTitle{font-size:1.08rem}
  .ftxSteps li{padding:4px 8px; font-size:.62rem}
}