:root{
  --bg0:#050816;
  --bg1:#0b1024;
  --edge:rgba(180,190,210,.18);
  --txt:#e9efff;
  --muted:#9fb3d9;
  --a0:#2d8fff;
  --a1:#8a5cff;
  --o0:#ff7a00;
  --ok:#30d158;
  --warn:#ffd60a;
  --bad:#ff453a;

  --ring: rgba(45,143,255,.28);
  --ring2: rgba(138,92,255,.20);
  --glow: rgba(45,143,255,.24);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 900px at 50% 25%, rgba(45,143,255,.16), transparent 55%),
              radial-gradient(900px 700px at 20% 80%, rgba(255,122,0,.10), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow:hidden;
}
#app{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.panel{
  width:min(520px, 96vw);
  border:1px solid var(--edge);
  background: rgba(9, 14, 32, .62);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:16px 16px 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
  letter-spacing:.3px;
}
.badge{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--edge);
  padding:4px 8px;
  border-radius:999px;
}
.sub{
  margin-top:6px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.35;
}
.stage{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  appearance:none;
  border:1px solid var(--edge);
  background: rgba(255,255,255,.03);
  color:var(--txt);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(45,143,255,.45); background: rgba(45,143,255,.06); }
.btn.primary{
  background: linear-gradient(90deg, rgba(45,143,255,.22), rgba(138,92,255,.18));
  border-color: rgba(45,143,255,.55);
}
.btn.danger{
  background: rgba(255,69,58,.08);
  border-color: rgba(255,69,58,.45);
}
.btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}
.hud{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}
.kv{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:var(--muted);
}
.kv b{color:var(--txt); font-weight:700}
.pills{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
}
.pill{
  font-size:11px;
  border:1px solid var(--edge);
  border-radius:999px;
  padding:4px 8px;
  color:var(--muted);
}
.pill.ok{ border-color: rgba(48,209,88,.45); color: rgba(48,209,88,.95); }
.pill.warn{ border-color: rgba(255,214,10,.45); color: rgba(255,214,10,.95); }
.pill.bad{ border-color: rgba(255,69,58,.45); color: rgba(255,69,58,.95); }

.orbWrap{
  margin: 12px 0 10px;
  display:flex;
  justify-content:center;
}
.orb{
  width: 280px; height: 280px;
  position:relative;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:visible;
}
.ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border: 2px solid var(--ring);
  filter: drop-shadow(0 0 14px var(--glow));
  transform: scale(var(--s,1));
  opacity: var(--op,.9);
  animation: breathe 3.2s ease-in-out infinite;
}
.ring.r2{ inset: 16px; border-color: var(--ring2); animation-duration: 4.2s; opacity:.75; }
.ring.r3{ inset: 34px; border-color: rgba(255,122,0,.18); animation-duration: 5.4s; opacity:.55; }
.core{
  width: 88px; height: 88px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.18), transparent 45%),
              radial-gradient(circle at 55% 65%, rgba(255,122,0,.28), transparent 55%),
              linear-gradient(180deg, rgba(45,143,255,.25), rgba(9,14,32,.05));
  border: 1px solid rgba(45,143,255,.38);
  box-shadow: 0 0 24px rgba(45,143,255,.14);
  transform: scale(var(--core,1));
  transition: transform .10s linear, box-shadow .10s linear, border-color .10s linear;
}
.spark{
  position:absolute;
  width:6px; height:6px;
  background: rgba(233,239,255,.85);
  border-radius:50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(var(--ang,0deg)) translateX(118px);
  opacity: .0;
}
.spark.on{ opacity: .95; animation: spark 1.1s ease-in-out infinite; }
@keyframes breathe{
  0%{ transform: scale(0.985); opacity:.72 }
  50%{ transform: scale(1.03); opacity:1 }
  100%{ transform: scale(0.985); opacity:.72 }
}
@keyframes spark{
  0%{ transform: translate(-50%,-50%) rotate(var(--ang)) translateX(112px) scale(.75); opacity:.35 }
  55%{ transform: translate(-50%,-50%) rotate(var(--ang)) translateX(126px) scale(1.25); opacity:1 }
  100%{ transform: translate(-50%,-50%) rotate(var(--ang)) translateX(112px) scale(.75); opacity:.35 }
}
.log{
  margin-top:8px;
  border-top:1px dashed rgba(180,190,210,.25);
  padding-top:10px;
  max-height: 140px;
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  color: rgba(233,239,255,.82);
  line-height:1.35;
}
.log .muted{ color: rgba(159,179,217,.85); }
a{ color: rgba(45,143,255,.95); text-decoration:none; }
a:hover{ text-decoration:underline; }