/* ---- Connect: a glass bubble to match the nav pill. The S sits in its own dark lens; on hover a light streak
   runs across the glass, the bubble squishes and settles, and the S rolls. A green dot shows once connected. */
.nglass{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;cursor:pointer;overflow:hidden;isolation:isolate;
  font:600 15px/1 var(--p-font);color:#fff;border:1px solid #8BFFD980;
  background:linear-gradient(180deg,#5FF2C55c,#1FC77E2e 48%,#0F8F5759);
  box-shadow:inset 0 1px 0 #ffffffa6,inset 0 -8px 16px #1FC77E40,0 0 0 1px #00000040,0 0 24px #1FC77E40,0 8px 22px #0009;
  -webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);
  transition:box-shadow .35s,border-color .35s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.nglass::before{content:'';position:absolute;left:10%;right:10%;top:2px;height:42%;border-radius:999px;background:linear-gradient(180deg,#ffffffb8,#fff0);opacity:.5;z-index:-1;pointer-events:none}
.nglass::after{content:'';position:absolute;top:-30%;bottom:-30%;left:-40%;width:34%;transform:skewX(-22deg) translateX(-120%);background:linear-gradient(90deg,#fff0,#ffffff59 50%,#fff0);opacity:0;pointer-events:none}
.nglass:hover{border-color:#A7F3C8;box-shadow:inset 0 1px 0 #ffffffc0,inset 0 -8px 16px #1FC77E4d,0 0 0 1px #00000040,0 0 28px #1FC77E52,0 8px 22px #0009}
.nglass:hover::after{animation:ng-streak 1.1s ease-out}
.nglass:active{transform:scale(.97)}
@keyframes ng-squish{0%{transform:scale(1)}30%{transform:scale(1.07,.92)}55%{transform:scale(.97,1.04)}100%{transform:scale(1)}}
@keyframes ng-streak{0%{opacity:0;transform:skewX(-22deg) translateX(-120%)}20%{opacity:1}100%{opacity:0;transform:skewX(-22deg) translateX(520%)}}
.nglass .t{position:relative;white-space:nowrap;text-shadow:0 1px 6px #0006}
.nglass[title]:not([title=""]) .t::after{content:'';display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;vertical-align:middle;background:#5FF2C5;box-shadow:0 0 8px #5FF2C5;animation:ng-pulse 1.8s ease-in-out infinite}
@keyframes ng-pulse{50%{opacity:.35}}
[data-p-theme=light] .nglass{color:#04140c;background:linear-gradient(180deg,#ffffffe6,#C9FFEAcc 50%,#8BF5CFb3);border-color:#1FC77E80;box-shadow:inset 0 1px 0 #fff,inset 0 -8px 16px #1FC77E33,0 6px 18px #0F8F5733}
[data-p-theme=light] .nglass .t{text-shadow:none}