:root{--bg:#070914;--card:#ffffff0b;--line:#ffffff1a;--tx:#e8ecff;--mu:#8a93b8;--ok:#34f5a5;--warn:#ffb84d;--bad:#ff5d73;--ac:#7c5cff;--ac2:#22d3ee;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--tx);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg:before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 35% at 20% 15%,#7c5cff55,transparent),radial-gradient(35% 30% at 85% 25%,#22d3ee40,transparent),radial-gradient(40% 35% at 55% 95%,#34f5a526,transparent);animation:drift 22s ease-in-out infinite alternate}
.bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 50% 20%,#000,transparent 75%)}
@keyframes drift{to{transform:translate3d(4%,3%,0) scale(1.12)}}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:26px 18px 8px}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 0 28px #7c5cff80}
h1{font-size:24px;letter-spacing:-.4px;background:linear-gradient(90deg,#fff,#b6c2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand p{color:var(--mu);font-size:13px}
.live{display:flex;align-items:center;gap:9px;padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:var(--card);font:12px var(--mono);color:var(--mu)}
.live i{width:9px;height:9px;border-radius:50%;background:var(--bad)}
.live.on i{background:var(--ok);box-shadow:0 0 0 0 #34f5a5aa;animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px #0000}}
main{max-width:1180px;margin:0 auto;padding:10px 18px 40px;display:grid;gap:18px}
.banner{--c:var(--mu);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:linear-gradient(110deg,color-mix(in srgb,var(--c) 20%,transparent),var(--card));border-radius:20px;padding:22px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 0 40px color-mix(in srgb,var(--c) 16%,transparent)}
.banner[data-t=ok]{--c:var(--ok)}.banner[data-t=full]{--c:var(--bad)}.banner[data-t=off]{--c:var(--warn)}
.banner .dot{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 18px var(--c);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.banner b{font-size:26px;letter-spacing:1px;color:var(--c)}
.banner span{color:var(--mu)}.banner em{font:700 20px var(--mono);font-style:normal;color:var(--tx)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat,.card{background:var(--card);border:1px solid var(--line);border-radius:18px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.stat{padding:16px 18px;transition:transform .2s,border-color .2s}.stat:hover{transform:translateY(-3px);border-color:#7c5cff80}
.stat b{display:block;font:700 30px/1.1 var(--mono);font-variant-numeric:tabular-nums}
.stat small{color:var(--mu);font-size:12px;text-transform:uppercase;letter-spacing:.8px}
.rules{display:flex;gap:10px;flex-wrap:wrap}
.rules span{padding:7px 13px;border:1px dashed var(--line);border-radius:99px;font-size:13px;color:var(--mu)}.rules b{color:var(--tx)}
.claim{display:grid;gap:12px;padding:22px;border-radius:20px;border:1px solid #7c5cff66;background:linear-gradient(120deg,#7c5cff1f,var(--card));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.claim h2{font-size:20px}.claim p{color:var(--mu);font-size:14px}
.claim form{display:flex;gap:10px;flex-wrap:wrap}
.claim input{flex:1;min-width:240px;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:#0006;color:var(--tx);font:inherit;outline:0}
.claim input:focus{border-color:var(--ac2);box-shadow:0 0 0 3px #22d3ee25}
.claim button{padding:13px 26px;border:0;border-radius:14px;font:700 15px inherit;font-family:inherit;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 0 22px #7c5cff66;transition:transform .15s,opacity .15s}
.claim button:hover{transform:translateY(-2px)}.claim button:disabled{opacity:.5;cursor:wait;transform:none}
.cm{display:none;padding:12px 15px;border-radius:12px;font-size:14px;border:1px solid var(--line);white-space:pre-line;word-break:break-word}
.cm.ok{display:block;color:var(--ok);border-color:#34f5a566;background:#34f5a512}.cm.bad{display:block;color:var(--bad);border-color:#ff5d7366;background:#ff5d7312}.cm.ac{display:block;color:var(--ac2);border-color:#22d3ee66;background:#22d3ee12}
.notes{color:var(--mu);font-size:13px;padding-left:18px;display:grid;gap:2px}
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#q{flex:1;min-width:220px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--tx);font:inherit;outline:0}
#q:focus{border-color:var(--ac2);box-shadow:0 0 0 3px #22d3ee25}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{padding:9px 15px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--mu);font:inherit;font-size:13px;cursor:pointer;transition:.2s}
.chips button:hover{color:var(--tx)}.chips button.on{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border-color:transparent}
.bots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:16px}
.card{padding:20px;--a:var(--ac);--b:var(--ac2);animation:in .5s both}
@keyframes in{from{opacity:0;transform:translateY(12px)}}
.card[data-st=available]{--a:#12d98a;--b:#34f5a5}.card[data-st=full]{--a:#ff3d5a;--b:#ff8a5d}.card[data-st=offline]{--a:#5b6388;--b:#8a93b8}
.hd{display:flex;gap:14px;align-items:center}
.av{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font:700 19px var(--mono);color:#06101a;background:linear-gradient(135deg,var(--a),var(--b))}
.hd h2{font-size:18px;line-height:1.2;word-break:break-word}.hd p{color:var(--mu);font-size:12px}
.hd>div:nth-child(2){flex:1;min-width:0}
.badge{padding:4px 11px;border-radius:99px;font:700 11px var(--mono);letter-spacing:.6px;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);white-space:nowrap}
.badge.ok{--c:var(--ok)}.badge.bad{--c:var(--bad)}.badge.warn{--c:var(--warn)}.badge.mu{--c:var(--mu)}.badge.ac{--c:var(--ac2)}
.meter{margin:16px 0 6px;display:flex;justify-content:space-between;font:13px var(--mono);color:var(--mu)}.meter b{color:var(--tx)}
.seg{display:flex;gap:3px}.seg i{flex:1;height:11px;border-radius:4px;background:#ffffff14}
.seg i.on{background:linear-gradient(90deg,var(--a),var(--b));box-shadow:0 0 10px color-mix(in srgb,var(--a) 70%,transparent)}
.seg.big{height:11px;border-radius:6px;background:#ffffff14;overflow:hidden}.seg.big i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--a),var(--b))}
.nf{margin-top:10px;font-size:13px;color:var(--mu)}.nf em{font:700 14px var(--mono);font-style:normal;color:var(--warn)}
.gl{margin-top:14px;display:grid;gap:9px}
.g{--c:var(--ok);padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#ffffff06;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center}
.g[data-lv=warn]{--c:var(--warn)}.g[data-lv=bad]{--c:var(--bad);animation:pulse 1.4s infinite}
.g .n{font-weight:600;word-break:break-word}.g .s{grid-column:1;color:var(--mu);font-size:12px}
.g .t{grid-row:1/3;grid-column:2;text-align:right;font:700 19px var(--mono);font-variant-numeric:tabular-nums;color:var(--c)}
.g .t.sm{font-size:12px;color:var(--mu)}
.g .bar{grid-column:1/3;height:5px;border-radius:5px;background:#ffffff12;overflow:hidden}.g .bar i{display:block;height:100%;background:var(--c);border-radius:5px;transition:width 1s linear;box-shadow:0 0 8px var(--c)}
.g.free{border-style:dashed;color:var(--mu);font-size:13px;display:block;background:none}
.empty{padding:40px;text-align:center;color:var(--mu);border:1px dashed var(--line);border-radius:18px;grid-column:1/-1}
footer{text-align:center;color:var(--mu);font-size:12px;padding:0 18px 30px}
@media(max-width:560px){.banner b{font-size:21px}.g .t{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}