/* Features tab. */
/* features */
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .3s cubic-bezier(.175,.885,.32,1.275),box-shadow .25s;position:relative}
.feat:hover{border-color:var(--kush);transform:translateY(-5px);box-shadow:0 14px 34px color-mix(in srgb,var(--kush) 18%,transparent)}
.feat::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--kush) 14%,transparent),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.feat:hover::after{opacity:1}
.mock{height:64px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--panel-2),var(--bg));position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:6px}
.fbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.feat .k{font-family:var(--f-data);font-size:17px;color:var(--haze)}
.feat h3{margin:0;font-size:17px;font-weight:700}
.feat p{margin:0;color:var(--mute);font-size:13.5px}
/* mock: loader */
.m-load{width:70%;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.m-load i{display:block;height:100%;background:var(--kush);box-shadow:0 0 8px var(--kush);animation:load 2.4s ease-in-out infinite}
@keyframes load{0%{width:0}70%,100%{width:100%}}
/* mock: fps bars */
.m-fps{display:flex;align-items:end;gap:3px;height:36px}
.m-fps i{width:6px;background:var(--kush);border-radius:2px 2px 0 0;animation:fps 1.2s ease-in-out infinite alternate}
@keyframes fps{from{height:60%}to{height:95%}}
/* mock: cloud sync dots */
.m-sync i{width:10px;height:10px;border-radius:50%;background:var(--haze);animation:sync 1.4s infinite}
.m-sync i:nth-child(2){animation-delay:.2s}.m-sync i:nth-child(3){animation-delay:.4s}
@keyframes sync{50%{transform:translateY(-8px);box-shadow:0 0 12px var(--haze)}}
/* mock: theme swatch */
.m-theme i{width:22px;height:22px;border-radius:6px;animation:hue 4s linear infinite}
.m-theme i:nth-child(1){background:var(--kush)}.m-theme i:nth-child(2){background:var(--haze);animation-delay:-1s}.m-theme i:nth-child(3){background:var(--resin);animation-delay:-2s}
@keyframes hue{50%{transform:rotate(45deg) scale(.8);filter:hue-rotate(90deg)}}
/* mock: key lock */
.m-lock{font-family:var(--f-data);font-size:22px;color:var(--resin);letter-spacing:3px;animation:lockp 2s infinite}
@keyframes lockp{50%{text-shadow:0 0 14px var(--resin)}}
/* mock: update spinner */
.m-upd{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--kush);animation:spinb 1s linear infinite}
.games{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.games > span{font-family:var(--f-data);font-size:18px;color:var(--mute);margin-right:6px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);font-size:13px;font-weight:600;background:var(--panel)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--kush);box-shadow:0 0 8px var(--kush)}
.chip.upd i{background:var(--resin);box-shadow:0 0 8px var(--resin)}
.chip.down i{background:var(--ember);box-shadow:0 0 8px var(--ember)}