*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0d12;--pan:#10151e;--line:#1d2532;--tx:#c8d1de;--mut:#6c7686;--ac:#46e0c0;--ac2:#5b8bff;--w:#f5b948}
body{background:radial-gradient(1200px 600px at 72% -10%,#141b27,#0a0d12);color:var(--tx);font:15px/1.55 ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2{font-weight:600;letter-spacing:-.02em}
button{font:inherit;cursor:pointer;color:inherit}
.hero{position:relative;overflow:hidden;padding:76px 24px 58px;border-bottom:1px solid var(--line)}
.hero-loop{position:absolute;inset:0;z-index:0}
.hero-loop span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.34;animation:fl 16s ease-in-out infinite}
.hero-loop span:nth-child(1){width:360px;height:360px;background:var(--ac);left:-70px;top:-70px}
.hero-loop span:nth-child(2){width:300px;height:300px;background:var(--ac2);right:-40px;top:10px;animation-delay:-5s}
.hero-loop span:nth-child(3){width:240px;height:240px;background:#7b5bff;left:42%;bottom:-90px;animation-delay:-10s}
@keyframes fl{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-26px) scale(1.12)}66%{transform:translate(-26px,18px) scale(.94)}}
.hero-in{position:relative;z-index:1;max-width:1060px;margin:0 auto}
.tag{font:600 11px/1 ui-monospace,monospace;letter-spacing:.22em;color:var(--ac);margin-bottom:18px}
h1{font-size:clamp(34px,6vw,58px);line-height:1.02}
.sub{color:var(--mut);margin:16px 0 28px;max-width:46ch}
.metrics{display:flex;flex-wrap:wrap;gap:14px}
.metrics div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-width:104px}
.metrics b{display:block;font-size:20px;color:#fff}
.metrics span{font-size:12px;color:var(--mut)}
main{max-width:1060px;margin:0 auto;padding:28px 24px 10px}
.panel{background:var(--pan);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:20px}
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
h2{font-size:15px}
.filters{display:flex;gap:6px}
.f{background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--mut);transition:.2s}
.f.active{background:var(--ac);border-color:var(--ac);color:#04130f}
.queue{list-style:none;display:grid;gap:10px}
.item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-left:3px solid var(--mut);border-radius:12px;padding:14px 16px;transition:.2s}
.item.active{border-left-color:var(--ac)}
.item.done{border-left-color:#3a4456;opacity:.66}
.item:hover{background:rgba(255,255,255,.04)}
.meta{display:flex;align-items:center;gap:10px}
.id{font:600 12px ui-monospace,monospace;color:var(--ac2)}
.pri{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.pri.high{color:var(--w)}
.title{font-size:14.5px;color:#e7ecf4}
.st{grid-column:2;grid-row:1/3;align-self:center;border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:12px;min-width:80px;transition:.2s}
.st.active{background:rgba(70,224,192,.12);border-color:var(--ac);color:var(--ac)}
.st.done{background:rgba(255,255,255,.04);color:var(--mut)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.screen{font:12.5px/1.7 ui-monospace,monospace;color:#9fe8d6;background:#070a0e;border:1px solid var(--line);border-radius:10px;padding:14px;height:210px;overflow:hidden;white-space:pre-wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 0 var(--ac);animation:pl 1.6s infinite}
@keyframes pl{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.flow{display:flex;flex-direction:column;gap:8px}
.node{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--mut);transition:.3s}
.node::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mut);transition:.3s}
.node.on{border-color:var(--ac);color:#fff;background:rgba(70,224,192,.07)}
.node.on::before{background:var(--ac);box-shadow:0 0 10px var(--ac)}
.arr{width:1px;height:10px;background:var(--line);margin-left:21px}
footer{text-align:center;color:var(--mut);font-size:12px;padding:24px}
@media(max-width:720px){.grid{grid-template-columns:1fr}}