:root{
  --bg:#0b0a1a;--s1:#15132d;--s2:#1f1c42;--s3:#2a2658;--tx:#f4f1ff;--mu:#9b96cc;
  --ac:#8b5cf6;--ac2:#ec4899;--ok:#22e39a;--bad:#ff4d6a;--gold:#ffc83d;
  --tc:#8b5cf6;--tcs:rgba(139,92,246,.28);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;position:relative;background:radial-gradient(120% 60% at 50% -10%,var(--s2),var(--bg) 70%)}

/* HUD */
#hud{display:flex;align-items:center;gap:8px;padding:calc(var(--sat) + 8px) 12px 6px}
.hud-i{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:14px;background:var(--s1);font-size:15px;min-width:54px;justify-content:center}
.hud-i b{font-weight:800}
.hud-lvl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 10px;border-radius:14px;background:var(--s1);text-align:left;font-size:12px;font-weight:700;color:var(--mu)}
.xpbar{height:7px;border-radius:5px;background:var(--s3);margin-top:5px;overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2));border-radius:5px;transition:width .5s}
.fl.hot{animation:flame 1s infinite alternate}
.fl.cold{filter:grayscale(1) opacity(.6)}
@keyframes flame{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.2) rotate(4deg)}}

#main{flex:1;min-height:0;position:relative}
.view{position:absolute;inset:0;display:flex;flex-direction:column}
.view.scroll{overflow-y:auto;padding:6px 14px 22px;display:block;-webkit-overflow-scrolling:touch}

/* feed */
#goalrow{display:flex;align-items:center;gap:8px;padding:2px 14px 6px;font-size:12px;color:var(--mu)}
.goalbar{flex:1;height:8px;border-radius:5px;background:var(--s2);overflow:hidden}
.goalbar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--ok),var(--gold));transition:width .5s}
#banner{margin:0 14px;font-size:13px;color:var(--tx);background:var(--s1);border-radius:12px;padding:8px 12px;display:none}
#banner.show{display:block;margin-bottom:6px}
#banner.warn{background:linear-gradient(90deg,rgba(255,77,106,.25),rgba(255,200,61,.15));border:1px solid rgba(255,77,106,.4)}
#banner button{color:var(--gold);font-weight:800;text-decoration:underline;margin-left:6px}
#modebar{display:flex;align-items:center;gap:8px;padding:0 14px;min-height:0;font-size:13px;color:var(--mu)}
#modebar:not(:empty){padding-bottom:6px;min-height:30px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--s1);border-radius:999px;padding:5px 11px;font-weight:700;font-size:12.5px}
.combo{margin-left:auto;font-weight:900;color:var(--gold);font-size:15px;transition:transform .2s}
.combo.pop{transform:scale(1.35)}
.tbar{flex:1;height:10px;border-radius:6px;background:var(--s2);overflow:hidden}
.tbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ac2),var(--gold));width:100%}
.hp i{background:linear-gradient(90deg,#ff3d6e,#ff9a3d)}

#stage{flex:1;min-height:0;position:relative;margin:0 12px;overflow:hidden}
.card{position:absolute;inset:0;border-radius:var(--r1,28px);padding:18px 16px 16px;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 50% -5%,var(--tcs),transparent 65%),var(--s1);
  border:var(--bw,1px) solid var(--s3);box-shadow:var(--shadow,0 6px 18px rgba(0,0,0,.35));
  transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .38s;overflow-y:auto}
.card.enter{transform:translateY(105%);opacity:.4}
.card.leave{transform:translateY(-105%);opacity:0}
.card.shake{animation:shake .4s}
.card.glow{animation:glow .6s}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes glow{50%{box-shadow:0 0 0 3px var(--ok),0 0 40px rgba(34,227,154,.5)}}
.tag{align-self:flex-start;display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:800;letter-spacing:.3px;color:var(--tc);background:var(--tcs);padding:5px 11px;border-radius:999px}
.tag .n{opacity:.75;font-weight:700}
.newb{margin-left:8px;font-size:11px;background:var(--ac2);color:#fff;padding:2px 8px;border-radius:999px;font-weight:800}
.qwrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 2px;min-height:90px}
.q{font-size:25px;line-height:1.28;font-weight:800;text-align:center;word-break:break-word}
.q.word{font-size:40px;letter-spacing:1px}
.q.sm{font-size:21px;font-weight:700}
.q small{display:block;font-size:14px;color:var(--mu);font-weight:600;margin-bottom:10px}
.gap{display:inline-block;min-width:1.1ch;border-bottom:4px solid var(--tc);color:var(--tc);margin:0 2px;transition:.25s}
.gap.fill{border-bottom-color:var(--ok);color:var(--ok)}
.gap.fill.bad{border-bottom-color:var(--bad);color:var(--bad)}
.opts{display:grid;gap:10px}
.opts.ltr{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.opt{padding:16px 12px;border-radius:var(--r2,18px);background:var(--s2);border:var(--bw,2px) solid var(--s3);font-size:20px;font-weight:800;text-align:center;line-height:1.2;transition:transform .12s,background .2s,border-color .2s}
.opt:active{transform:scale(.96)}
.opt.big{font-size:28px;padding:20px 8px}
.opt em{font-style:normal;color:var(--tc);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.opt.right{background:rgba(34,227,154,.18);border-color:var(--ok)}
.opt.wrong{background:rgba(255,77,106,.18);border-color:var(--bad)}
.opt.dim{opacity:.4}
.opt.right em,.opt.wrong em{color:inherit}
.fx-xp{position:absolute;left:50%;top:38%;transform:translateX(-50%);font-weight:900;font-size:34px;color:var(--gold);pointer-events:none;text-shadow:0 4px 20px rgba(0,0,0,.6);animation:flo 1s forwards;z-index:5;white-space:nowrap}
.fx-xp.crit{color:#ff5de2;font-size:42px}
@keyframes flo{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}25%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-80px) scale(1)}}

/* commas */
.sent{font-size:23px;line-height:2.1;font-weight:700;text-align:center}
.gp{display:inline-block;width:20px;height:34px;vertical-align:middle;margin:0 -2px;border-radius:6px;position:relative;color:var(--tc);font-weight:900;font-size:26px;line-height:34px}
.gp::after{content:"";position:absolute;left:5px;right:5px;bottom:4px;height:3px;border-radius:2px;background:var(--s3)}
.gp.on::after{background:transparent}
.gp.on::before{content:",";position:absolute;left:5px;top:-4px}
.gp.good{color:var(--ok)}.gp.miss{color:var(--bad)}.gp.extra{color:var(--bad);text-decoration:line-through}
.gp.miss::before{content:",";position:absolute;left:5px;top:-4px}
.gp.good::after,.gp.extra::after,.gp.miss::after{background:transparent}
.hintline{text-align:center;color:var(--mu);font-size:13px;margin-bottom:10px}
.btn{display:block;width:100%;padding:16px;border-radius:var(--r2,18px);font-weight:900;font-size:18px;background:linear-gradient(90deg,var(--ac),var(--ac2));color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.35);transition:transform .1s}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;filter:grayscale(.5)}
.btn.sec{background:var(--s2);box-shadow:none;border:2px solid var(--s3);color:var(--tx)}
.btn.sm{padding:10px 14px;font-size:14px;border-radius:14px;width:auto;display:inline-block}
.btn.gold{background:linear-gradient(90deg,#ffb82e,#ff7a3d)}

/* sheet */
#sheet{padding:0 12px;transition:.25s}
.sh{margin:8px 0 6px;border-radius:calc(var(--r1,28px)*.8);padding:14px;background:var(--s2);border:var(--bw,2px) solid var(--s3);animation:up .3s}
.sh.ok{border-color:var(--ok)}.sh.bad{border-color:var(--bad)}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sh h4{font-size:18px;font-weight:900;margin-bottom:6px;display:flex;justify-content:space-between;gap:8px}
.sh h4 span{color:var(--gold)}
.sh p{font-size:14.5px;line-height:1.45;color:var(--tx2,#d9d5ff);margin-bottom:10px}
.sh p b{color:var(--tx)}
.auto{height:4px;border-radius:3px;background:var(--s3);overflow:hidden;margin-top:6px}
.auto i{display:block;height:100%;background:var(--ok);width:100%;transform:scaleX(0);transform-origin:left}

/* nav */
#nav{display:flex;padding:6px 8px calc(var(--sab) + 6px);background:linear-gradient(0deg,var(--bg),transparent)}
#nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:11.5px;font-weight:700;color:var(--mu);border-radius:14px;position:relative}
#nav button span{font-size:22px;opacity:.55}
#nav button.on{color:var(--tx)}#nav button.on span{opacity:1}
.dot{position:absolute;top:4px;left:56%;width:10px;height:10px;border-radius:50%;background:var(--bad);border:2px solid var(--bg)}

/* panels */
h2{font-size:22px;font-weight:900;margin:12px 0 10px}
h3{font-size:15px;font-weight:800;color:var(--mu);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.8px}
.panel{display:block;width:100%;background:var(--s1);border:1px solid var(--s3);border-radius:calc(var(--r1,28px)*.72);padding:14px;margin-bottom:10px}
.row{display:flex;align-items:center;gap:10px}
.row .grow{flex:1;min-width:0}
.t1{font-weight:800;font-size:16px}.t2{font-size:13px;color:var(--mu);margin-top:2px}
.pbar{height:9px;border-radius:5px;background:var(--s3);overflow:hidden;margin-top:7px}
.pbar i{display:block;height:100%;border-radius:5px;background:var(--tc,var(--ac));transition:width .6s}
.ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:24px;background:var(--s2);flex:none}
.big{font-size:44px;font-weight:900;line-height:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--s1);border:1px solid var(--s3);border-radius:18px;padding:12px;text-align:center}
.stat b{display:block;font-size:24px;font-weight:900}.stat span{font-size:12px;color:var(--mu)}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.heat i{aspect-ratio:1;border-radius:6px;background:var(--s2)}
.heat i.l1{background:var(--ac);opacity:.3}.heat i.l2{background:var(--ac);opacity:.55}.heat i.l3{background:var(--ac);opacity:.8}.heat i.l4{background:var(--ac2)}
.heat i.today{outline:2px solid var(--gold)}
.lb{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:12px}
.lb.me{background:var(--s3);font-weight:900}
.lb .rk{width:24px;text-align:center;font-weight:900;color:var(--mu)}
.lb .xp{margin-left:auto;font-weight:800}
.ach{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ach div{background:var(--s1);border:1px solid var(--s3);border-radius:14px;padding:10px 4px;text-align:center;font-size:10.5px;font-weight:700;color:var(--mu)}
.ach div span{display:block;font-size:26px}
.ach div.off{opacity:.35;filter:grayscale(1)}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.sw button{padding:10px 14px;border-radius:14px;background:var(--s2);border:2px solid var(--s3);font-weight:800;font-size:14px}
.sw button.on{border-color:var(--ac)}
input,textarea,select{font:inherit;color:var(--tx);background:var(--s2);border:2px solid var(--s3);border-radius:12px;padding:10px;width:100%;user-select:text;-webkit-user-select:text}
textarea{height:90px;font-size:11px}
.sw2{position:relative;width:52px;height:30px;border-radius:15px;background:var(--s3);flex:none;transition:.2s}
.sw2::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}
.sw2.on{background:var(--ok)}.sw2.on::after{left:25px}

/* overlay */
#layer{position:absolute;inset:0;pointer-events:none;z-index:20}
.ov{position:absolute;inset:0;pointer-events:auto;background:rgba(5,4,15,.9);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.modal{width:100%;max-width:420px;background:var(--s1);border:var(--bw,2px) solid var(--s3);border-radius:var(--r1,28px);padding:24px 20px;text-align:center;animation:pop .35s cubic-bezier(.2,1.4,.4,1);max-height:92%;overflow-y:auto}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.modal h1{font-size:26px;font-weight:900;margin-bottom:6px}
.modal p{color:var(--tx2,#cfcaf5);line-height:1.45;margin:6px 0 14px;font-size:15px}
.chest{font-size:110px;line-height:1.1;cursor:pointer;display:inline-block;animation:bob 1.2s infinite alternate}
.chest.open{animation:none}
@keyframes bob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-10px) rotate(4deg)}}
.chest.shake{animation:shk .5s}
@keyframes shk{25%{transform:rotate(-14deg) scale(1.1)}50%{transform:rotate(14deg) scale(1.2)}75%{transform:rotate(-8deg) scale(1.1)}}
.rw{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.rw div{background:var(--s2);border-radius:16px;padding:10px 16px;font-weight:900;font-size:22px;animation:pop .4s backwards}
.rw div.leg{background:linear-gradient(90deg,#ffb82e,#ff3d81);color:#fff}
#toasts{position:absolute;left:0;right:0;top:calc(var(--sat) + 62px);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:30;pointer-events:none}
.toast{background:var(--s3);border:1px solid var(--ac);padding:9px 16px;border-radius:14px;font-weight:700;font-size:14px;max-width:92%;text-align:center;animation:tin .3s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.out{opacity:0;transform:translateY(-10px);transition:.3s}
@keyframes tin{from{opacity:0;transform:translateY(-14px)}}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

.em{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;line-height:1}.em svg{width:100%!important;height:100%!important;display:block}
#nav button span .em{width:26px;height:26px}
.chest .em{width:1em;height:1em}

/* ---- новые элементы ---- */
#nav button{font-size:10.5px}#nav button span{font-size:20px}
.stars{margin-left:8px;font-size:11px;letter-spacing:1px;opacity:.85;color:var(--gold)}
.tipline{font-size:14px;color:var(--mu);font-weight:600;margin-top:10px}
.modecard{text-align:left}
.mico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:26px;background:var(--s2);margin-bottom:8px}
.seg{display:flex;gap:4px;background:var(--s2);border-radius:var(--r2,18px);padding:4px;overflow-x:auto;flex-wrap:nowrap}
.seg button{flex:1;white-space:nowrap;padding:8px 10px;border-radius:calc(var(--r2,18px) - 4px);font-weight:800;font-size:12.5px;color:var(--mu)}
.seg button.on{background:linear-gradient(90deg,var(--ac),var(--ac2));color:#fff}
.seg.tabs{margin-bottom:12px}.seg.tabs button{font-size:13.5px}
.pill{background:var(--bad);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;margin-left:4px}
.mixrow{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;text-align:left}
.mixname{font-weight:800;font-size:14px}.mixno{color:var(--mu);font-weight:600;font-size:12px;margin-left:6px}
.mixrow .seg button{padding:7px 4px;font-size:11.5px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.swatch{aspect-ratio:1.25;border-radius:var(--r2,14px);border:3px solid transparent;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(128,128,128,.35)}
.swatch span{position:absolute;left:0;right:0;bottom:0;font-size:10.5px;font-weight:800;padding:3px 0;background:rgba(0,0,0,.45);color:#fff}
.swatch.on{border-color:var(--tx)}
.topicgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;max-height:46vh;overflow-y:auto}
.topicgrid button{padding:10px;border-radius:var(--r2,14px);background:var(--s2);border:2px solid var(--s3);font-weight:700;font-size:13.5px}
.topicgrid button.on{border-color:var(--ac);background:var(--s3)}
.sw.avatars button{font-size:24px;padding:6px 10px}
.av{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--s2);font-size:22px;flex:none}
.lname{display:flex;flex-direction:column;min-width:0;flex:1;text-align:left}
.lname b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lname small{color:var(--mu);font-size:12px}
.lb{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:12px}
.acts{display:flex;gap:6px;flex:none}.score{font-weight:800;margin-right:4px}
.field{margin:8px 0}.err{color:var(--bad);font-weight:700;font-size:13px;min-height:18px;margin-top:6px}
.hero{background:linear-gradient(135deg,var(--s1),var(--s2))}
.still .em{opacity:.95}
.card .gp.on::before,.gp.good::before{font-family:inherit}
.sw{display:flex;gap:8px;flex-wrap:wrap}

.tools{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.tools button{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;background:var(--s2);border:1px solid var(--s3);font-size:14px}
.tools button b{font-size:13px;color:var(--mu)}
.opt.gone{visibility:hidden}
.gp.hintpulse::after{background:var(--gold)!important;animation:hp 1s infinite}
@keyframes hp{50%{opacity:.25}}
.shopov{align-items:stretch;padding:0;background:var(--bg)}
.shoppane{width:100%;height:100%;overflow-y:auto;padding:calc(var(--sat) + 12px) 14px 24px}
.shophead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.shopitem{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--s3);border-radius:calc(var(--r1,28px)*.7);padding:10px;margin-bottom:8px}
.shopitem.offer{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.shopitem .grow{min-width:0}
.shopitem .ico{width:46px;height:46px;font-size:26px}
.mini{width:46px;height:46px;border-radius:14px;flex:none;box-shadow:inset 0 0 0 1px rgba(128,128,128,.4)}
.sale{background:var(--gold);color:#000;border-radius:6px;padding:1px 6px;font-size:11px;margin-left:6px;font-weight:900}
.cnt{color:var(--mu);font-weight:700;font-size:13px}
.shopitem s{opacity:.6;font-size:11px}

/* эмодзи: статичные <img>, анимация (Lottie) — поверх, только в нескольких местах */
.em{position:relative}
.em img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.emanim{position:absolute;inset:0}
.emanim svg{width:100%!important;height:100%!important;display:block}
.card{contain:layout style}
#fx{display:none}

/* push-плашки сверху */
#pushes{position:absolute;left:10px;right:10px;top:calc(var(--sat) + 8px);z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.push{pointer-events:auto;display:flex;gap:12px;align-items:center;background:var(--s2);border:2px solid var(--ac);border-radius:var(--r2,18px);padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:pushin .35s cubic-bezier(.2,1.2,.4,1);cursor:pointer}
.push.out{opacity:0;transform:translateY(-24px);transition:.3s}
.push .pi{font-size:26px;flex:none}.push .pt{min-width:0}.push .pt b{display:block;font-size:15px}.push .pt div{font-size:13px;color:var(--mu)}
@keyframes pushin{from{transform:translateY(-70px);opacity:0}}
/* туториал */
.tutico{font-size:72px;line-height:1.1;margin-bottom:6px}
.dots{display:flex;gap:6px;justify-content:center;margin:12px 0 16px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--s3)}.dots i.on{background:var(--ac);width:22px;border-radius:5px}
/* дуэли: приглашение, лобби, обратный отсчёт */
.ov.full{background:radial-gradient(120% 80% at 50% 0%,var(--s2),var(--bg))}
.duelbox{width:100%;max-width:420px;text-align:center;animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
.bigav{display:inline-grid;place-items:center;width:110px;height:110px;border-radius:32px;background:var(--s2);border:3px solid var(--ac);font-size:60px;margin-bottom:10px}
.duelbox h1{font-size:28px;font-weight:900;margin-bottom:6px}
.duelbox p{color:var(--tx2,#d9d5ff);margin:6px 0 14px;line-height:1.4}
.invbar{height:8px;border-radius:5px;background:var(--s3);overflow:hidden;margin:6px 0 16px}
.invbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--ac),var(--ac2));transform-origin:left}
.vs{display:flex;align-items:center;justify-content:center;gap:14px}
.vs .bigav{width:88px;height:88px;font-size:48px}.vs b{font-size:28px;color:var(--gold)}
.cdnum{font-size:120px;font-weight:900;line-height:1;margin:14px 0;color:var(--gold);text-shadow:0 8px 40px rgba(0,0,0,.5)}
.cdnum.pulse{animation:cdp .5s}
@keyframes cdp{from{transform:scale(1.6);opacity:.2}}
.spin{width:44px;height:44px;border-radius:50%;border:5px solid var(--s3);border-top-color:var(--ac);margin:14px auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.online{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:5px}