.trl-account-ready nav[aria-label="Account navigation"] { transition: opacity 220ms cubic-bezier(.16, 1, .3, 1), visibility 220ms; }
html:not(.trl-account-ready) nav[aria-label="Account navigation"] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
html:not(.trl-account-ready) #mobile-menu a[href="login.html"],
html:not(.trl-account-ready) #mobile-menu a[href="signup.html"] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.site-account-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 6px 5px 11px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1), background-color 260ms cubic-bezier(.16, 1, .3, 1), border-color 260ms cubic-bezier(.16, 1, .3, 1);
}
.site-account-profile:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.site-account-profile:active { transform: scale(.98); }
.site-account-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; }
.site-account-dot { width: 7px; height: 7px; border-radius: 50%; background: #74d996; box-shadow: 0 0 0 4px rgba(116, 217, 150, .1); animation: site-account-breathe 2.8s ease-in-out infinite; }
.site-account-avatar { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; overflow: hidden; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: #f4f5f7; color: #14161a; font: 750 9px/1 ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; }
.site-account-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.site-account-mobile { grid-column: span 2; justify-content: center; padding: 8px 10px; }
.site-account-mobile .site-account-avatar { width: 24px; height: 24px; flex-basis: 24px; }
@keyframes site-account-breathe { 50% { opacity: .55; transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .site-account-dot { animation: none; } }