#vg-login{position:relative;display:flex;align-items:center}
.vg-login{border:0;cursor:pointer;border-radius:.5rem;background:#fff;color:#000;padding:.5rem 1rem;font-family:inherit;font-size:.875rem;line-height:1.25rem;font-weight:600;transition:transform .15s}
.vg-login:hover{transform:scale(1.05)}
.vg-chip{display:flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#e2e8f0;border-radius:999px;padding:.25rem .75rem .25rem .25rem;cursor:pointer;font-family:inherit;font-size:.875rem;font-weight:600;position:relative}
.vg-avatar{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#22d3ee,#a3e635);color:#07090f;font-weight:800}
.vg-name{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-dot{position:absolute;top:0;left:1.6rem;width:.55rem;height:.55rem;border-radius:50%;background:#a3e635;box-shadow:0 0 0 2px #07090f}
.vg-account{position:absolute;right:0;top:calc(100% + .5rem);min-width:15rem;padding:.75rem;border-radius:.75rem;background:rgba(15,18,28,.97);border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 40px rgba(0,0,0,.5);display:grid;gap:.5rem}
.vg-account[hidden]{display:none}
.vg-account p{margin:0;font-size:.8125rem;color:#94a3b8}
.vg-account button{border:0;background:rgba(255,255,255,.06);color:#e2e8f0;border-radius:.5rem;padding:.5rem;cursor:pointer;font-family:inherit;font-size:.875rem;font-weight:500;text-align:left}
.vg-account button:hover{background:rgba(255,255,255,.12)}
@media (max-width:767px){#vg-login{display:none}#vg-login:has(.vg-chip){display:flex;margin-left:auto;margin-right:.75rem}.vg-name{display:none}.vg-chip{padding:.25rem}}