:root{
  --bg:#070816; --card:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.62);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(900px 600px at 20% 0%, rgba(168,85,247,.22), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(56,189,248,.18), transparent 55%),
              linear-gradient(135deg, #050513, #071a2a);
  color:var(--text);
}
.top{padding:18px 18px 8px}
h1{margin:0;font-size:22px}
.muted{color:var(--muted)}
.small{font-size:12px}
.bar{display:flex; gap:10px; align-items:center; margin-top:10px}
.btn{
  border:1px solid var(--stroke); background:rgba(255,255,255,.10);
  color:var(--text); padding:9px 12px; border-radius:12px; cursor:pointer;
}
.btn.primary{background:linear-gradient(135deg, rgba(168,85,247,.9), rgba(56,189,248,.7))}
.btn:disabled{opacity:.5; cursor:not-allowed}
.pill{padding:8px 10px; border:1px solid var(--stroke); border-radius:999px; background:rgba(0,0,0,.18)}
.grid{display:grid; grid-template-columns: 360px 1fr; gap:14px; padding:10px 18px 18px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
.card{
  background:var(--card); border:1px solid var(--stroke); border-radius:18px;
  padding:14px; backdrop-filter: blur(10px);
}
.label{display:block;margin-top:10px;font-size:12px;color:var(--muted)}
.input{
  width:100%; padding:10px 11px; border-radius:12px;
  border:1px solid var(--stroke); background:rgba(0,0,0,.18); color:var(--text);
  outline:none;
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{
  padding:7px 10px; border-radius:999px; border:1px solid var(--stroke);
  background:rgba(0,0,0,.16); color:var(--text); cursor:pointer;
}
.chip.active{border-color:rgba(168,85,247,.7); box-shadow:0 0 0 3px rgba(168,85,247,.12)}
.row{display:flex; justify-content:space-between; gap:12px; margin-top:12px}
.big{font-size:18px;font-weight:700}
.row2{display:flex; gap:10px; margin-top:12px}
.status{margin-top:10px; min-height:18px; color:var(--muted); font-size:13px}
.status.good{color:rgba(34,197,94,.95)}
.status.bad{color:rgba(239,68,68,.95)}
.head{display:flex; justify-content:space-between; align-items:center}
.field{
  margin-top:10px; height:420px; border-radius:16px;
  border:1px dashed rgba(255,255,255,.18);
  background: radial-gradient(600px 260px at 50% 110%, rgba(255,170,0,.10), transparent 60%),
              rgba(0,0,0,.14);
  position:relative; overflow:hidden;
}
.candle{position:absolute; width:44px; height:86px; transform:translate(-50%,-100%); filter: drop-shadow(0 16px 18px rgba(0,0,0,.35));}
.body{position:absolute; left:50%; bottom:0; width:40px; height:70px; transform:translateX(-50%); border-radius:14px 14px 10px 10px; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70)); border:1px solid rgba(255,255,255,.25); overflow:hidden;}
.melt{position:absolute; left:0; bottom:0; width:100%; height:0%; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.18)); animation: melt linear forwards;}
.wick{position:absolute; left:50%; bottom:67px; width:3px; height:9px; transform:translateX(-50%); background:rgba(30,30,30,.8); border-radius:2px;}
.flame{position:absolute; left:50%; bottom:74px; width:18px; height:26px; transform:translateX(-50%); border-radius:60%; background:radial-gradient(circle at 50% 30%, rgba(255,255,190,1) 0%, rgba(255,170,0,1) 45%, rgba(255,70,0,.92) 78%, rgba(255,70,0,0) 100%); transform-origin:50% 90%; animation:flicker 120ms infinite alternate ease-in-out;}
.glow{position:absolute; left:50%; bottom:58px; width:120px; height:120px; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,170,0,.22), transparent 60%); animation:breathe 1.6s infinite ease-in-out; pointer-events:none}
.badge{position:absolute; left:50%; top:74px; transform:translateX(-50%); font-size:11px; color:rgba(255,255,255,.72); background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:3px 6px; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@keyframes flicker{0%{transform:translateX(-50%) rotate(-2deg) scale(.98);opacity:.92}100%{transform:translateX(-50%) rotate(2deg) scale(1.06);opacity:1}}
@keyframes breathe{0%{transform:translate(-50%,-50%) scale(.95);opacity:.85}100%{transform:translate(-50%,-50%) scale(1.05);opacity:1}}
@keyframes melt{from{height:0%}to{height:100%}}
.h3{margin:14px 0 8px}
.feed{display:flex; flex-direction:column; gap:8px}
.item{padding:10px; border-radius:14px; border:1px solid var(--stroke); background:rgba(0,0,0,.16)}
.footer{padding:0 18px 16px}